وقتی عکس هاور میشود چیدمان بهم میخورد !
سوال جدیدسلام.
من یه دیو دارم با نام باکس درونش هم سه تا img دارم که به همشون یک کلاس دادم
و گفتم وقتی هاور شد این اتفاق بیفته که border:4px solid rgba(255, 0, 0, 0.836); border-radius: 50% ; background-color: rgba(255, 0, 0, 0.836)
اما متاسفانه تصاویر وقتی هاور که میشند تکون میخورند حتی وقتی فضای بیشتری بهشون میدم .
علت این موضوع در اضافه کردن border به تصاویر هست. بعد از هاور به طول و عرض تصاویر (از نظر box-model) اضافه میشه و جابه جا میشن. با اضافه کردن این کد به تصاویر این مشکل برطرف میشه:
.images {
box-sizing: border-box;
}
علاوه بر box-sizing که در پاسخ زیر به خوبی بهش اشاره شده، برای اینکه موقع هاور تغییر و پرشی در تصاویر مشاهده نشه، می تونید به تصاویر( در حالت غیر هاور) هم همان border را اضافه کنید البته به صورت transparent و در حالت هاور فقط رنگ آن را تغییر دهید
(یک مورد هم اینکه اگر برای سوالاتتون از نمونه کد استفاده کنید بهتر میشه راهنمایی کرد )