Как избавиться от изменения высоты блока при удалении border?

Question

[ForestEsprit]

Есть блок, по умолчанию у него ест однопиксельный бордер, при наведении бордер должен исчезать и появляется тень. Пробема в том, что при удалении бордера блок становится по высоте меньше на пару пикселей, от чего нужно избавиться. Зафиксировать высоту блока не могу, она меняется от контекста.

Сделат бордер прозрачным при наведении не получилось, ибо в .card лежит картинка и около неё по краю остаётся белая рамочка.

.card {
  border-radius: 10px;
  border: 1px solid rgba(240, 240, 240, 1);
  transition: box-shadow .3s;
  box-sizing: border-box;
  &:hover {
    border: 0px;
    box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, .16);
  }
}

Answer 1

[Дмитрий Кравченко]

MDN

.el{
box-sizing: border-box;
}

Comments

[ForestEsprit]

В приведённом мною коде это свойство прописано

[Дмитрий Кравченко]

ForestEsprit: упс...) тогда как насчет грязного хака: border-width: 0px; padding: 1px; ?

[ForestEsprit]

Дмитрий Кравченко
Я тоже пробовала, но тогда картинка, стоящая в край, будет отступать на 1px и снова я получаю белую рамку

[Дмитрий Кравченко]

ForestEsprit: есть ли вариант создать псевдоэлемент на всю ширину и высоту .card и border задать ему?

[ForestEsprit]

Есть, но это совсем плохой вариант просто по логике(

[Дмитрий Кравченко]

ForestEsprit: может быть, есть шанс картинку поставить бэкграундом, а не через тег img? тогда вариант с паддингом сработает

[ForestEsprit]

Дмитрий Кравченко Вариант поставить картинку фоном есть, но по логике, в моём конкретном случае, это будет не верно. Картинка на сайте должна оставаться картинкой, а не превращаться в фон.

[Дмитрий Кравченко]

ForestEsprit: можно попробовать абсолютно спозиционировать картинку, заставив наплевать на паддинги. Больше вариантов у меня, боюсь, нет. :)

[ForestEsprit]

Дмитрий Кравченко тут прошло много хороших варианто, отмечу это решением

Answer 2

[Константин Давыдов]

codepen.io/anon/pen/KMPNvR

Comments

[ForestEsprit]

в .card лежит картинка и около неё по краю остаётся белая рамочка

[Константин Давыдов]

ForestEsprit: Обновил решение по той же ссылке.

Answer 3

[Alex]

htmlbook.ru/css/outline

Comments

[ForestEsprit]

Как вариант да, но outline не подчиняется border-radius

Answer 4

[Mike Syomin]

Не надо убирать бордер. Сделай его прозрачным прост.
&:hover {
border: 1px solid trasparent;
box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, .16);
}

Comments

[ForestEsprit]

Внутри дива лежит картинка в край и если делать бордер прозрачным, то он становится прозрачным относительно родителя, таким образом я получаю белую рамку.

[Mike Syomin]

ForestEsprit: выкати свой код где-нибудь.

[Mike Syomin]

Box-shadow нужно въебать на :hover:after с транзишном, border на просто :hover. img получает у нас display: block. В итоге какую-бы картинку мы не поставили (по высоте) все будет ок.
https://jsfiddle.net/kenzoki/ffhLbcjx/