Как исправить верстку?

Question

[MRcracker]

Есть блок. У данного блока при наведении должна быть рамка в 2 пикселя. Блок содержит в себе картинку и текст.
Когда ставлю рамку, то блок немного дергается. Для того, чтобы это исправить добавил блоку прозрачную рамку без наведения на него курсора, но тогда у картинки появляется небольшой отступ на размер прозрачной рамки. Как это можно исправить?

У рамки должны быть скругления 8 пикселей

Comments

[VegasChickiChicki]

Не совсем понятно...
Можно, например, через абсолютно позиционированный псевдо элемент сделать(before, after).

[MRcracker]

VegasChickiChicki, суть такая. задать рамку при наведении так, чтобы карточка товара не дергалась когда на нее наводишь мышку))

[Rustam Bainazarov]

MRcracker, box shadow.

А без дизайна сказать доподлинно — сложно.

[MRcracker]

Рустам Байназаров, добавил пример карточки. обычная и при наведении

[Rustam Bainazarov]

MRcracker, два box shadow: один для тени, второй — для обводки.

[Алексей Скляров]

Не пробовали добавить карточке 2 пкс белой обводки по умолчанию, а потом просто при наведении менять цвет обводки?

[MRcracker]

Алексей Скляров, если бы все так просто было. у картинки внутри карточки не должно быть обводки

Answer 1

[Максим]

Так может быть ?

Answer 2

[Виталий Першин]

Answer 3

[iminby]

У блока должно работать свойство box-sizing: border-box;
Дальше при наведении добавляешь рамку, таким образом, рамка ,будет включаться в размеры блока, а не добавлять новые дополнительные пиксели и скачка не будет.