Как реализован этот hover?

Question

[dhat]

На этом сайте в разделе Editor's Picks когда наводишь на элемент он меняется.
В ДевТулзе я посмотрел, и там судя по всему реализовано не добавлением классов, а какими-то манипуляция с before и after.
Как это выглядит на практике? Не видел такого кода. Обычно в JS реализовывается заменой классов, почему тут так сделано?

https://www.packtpub.com/

Comments

[Kovalsky]

Вы посмотрите код-то

Блок с книжкой это .book-block, у него внутри есть скрытый .book-block-overlay, который по ховеру на .book-block показывается.

[dhat]

Никита Полевой: я посмотрел код, как раз после этого и полез спрашивать, так как мне не понятно почему при ховере появляется :before и :after

Answer 1

[Sn0wSky]

:before и :after тут не при чём. Просто на :hover зачем-то их добавляют, но сути не меняет

Просто есть overlay с position: absolute, которой появляется на hover, без всякого js

https://jsfiddle.net/e0drh965/

Comments

[dhat]

Я извиняюсь, а что такое оверлей? Это просто название такой техники, когда сверху накладывается, или это какое-то свойство CSS?

[dhat]

Меня просто смутило что в ДевТулзе при ховере появлялись именно before и :after.

[Sn0wSky]

dhat: просто общепринятое название, передающее суть. Наложенный слой. Со свойствами CSS не связано.