Как правильно сделать такой ховер?

Question

[olya_097]

Речь о "бордере"


https://jsfiddle.net/vt27ech6/

Comments

[Ankhena]

outline-offset

Answer 1

[0xD34F]

.gallery__item:hover::before {
  content: "";
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  left: 10px;
  top: 10px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  background: transparent;
  z-index: 666;
}

Comments

[Никита Чернов]

Лучше, наверное, явно не указывать высоту и ширину, а просто указать отступы от всех сторон.

top: 5px;
  bottom: 5px;
  left: 5px;
  right: 5px;

[0xD34F]

DRIMchansky, так точно. Вы правы.

Answer 2

[nuffyweb]

через "::before"
вот так

Comments

[olya_097]

а не подскажете этот нюанс, пожалуйста?
Как сделать эффект смотря с какой стороны навел курсор, с той и появляется ховер?