Интересное использование псевдо-элементов к изображениям

Мы будем исследовать, как создать псевдоэлементы при помощи некоторых атрибутов и использовать их в качестве эффектов при наведении или просто будем использовать их рядом с изображением. Мы также будем использовать семантическую разметку. Это простой пример для того чтобы вы могли легко разобраться, как использовать эти свойства, а также как создать некоторые интересные эффекты с их помощью. И так, давайте приступим.

Шаг 1. HTML
Для начала нам необходимо создать простую разметку, как вы уже прочитали выше она будет семантической.


C разметкой мы разобрались. Давайте перейдем к следующему шагу.

Шаг 2. CSS
Начнем последовательно. У нас первый заголовок изображения будет статическим: мы хотим поместить атрибут с описанием справа от изображения. Для этого мы настроим стиль привязки изображения:


Для правильного отображения на мобильных устройствах, установим 100% max-width для изображения. Теперь мы рассмотрим каждый пример в деталях.

Пример 1.
В первом примере, нам нужно чтобы оба псевдо-элемента, находились на правой стороне, рядом с изображением.


Давайте установим контент для каждого псевдоэлемента. Для этого нужно получить значение его атрибута и добавить его в содержание псевдоэлемента с помощью attr():


Давайте настроим стиль для псевдо-элемента :after:


Пример 2.
Установим непрозрачность со значением 0, а также переход для непрозрачности, это позволит нам изменить значение непрозрачности при наведении курсора мыши:


Для заголовка установим дополнительный цвет фона, а также ограничим его высоту до 30% от общей высоты:


Затем установим непрозрачность со значением 1, при наведении курсора:


Пример 3.
В следующем примере мы хотим отобразить заголовок с еще более причудливым эффектом. Также при наведении, сделаем изображение немного темнее, чтобы имитировать тень. Кроме того, мы установим якорь на черном фоне, чтобы мы могли сделать изображение темнее, когда мы уменьшаем его прозрачность:


Мы установим переход для изображения, а также изменим непрозрачность до 0,5 при наведении. Это позволит сделать изображение немного темнее:


Мы позиционируем псевдо-элементы за пределами основного прямоугольника, путем перевода их на ось Y:


Давайте установим для псевдоэлементов цвет фона, а также некоторые преобразования, чтобы заголовок и описание выпадали с двух сторон:


Пример 4.
В последнем примере, мы сделаем, чтобы при наведении, изображение перемещалось в правую сторону, выдвигая псевдо-элементы с левой стороны. Теперь создадим эффект тени с помощью анимации фона привязки из полупрозрачного черного к полностью прозрачному:


Изображение будет перемещаться вправо при наведении курсора. Для этого мы будем использовать TranslateX:


Псевдо-элементы должны находиться под якорем, поэтому мы установим значение z-index в -1:


Как и прежде, мы добавим соответствующее содержание к псевдо-элементам и зададим ему определенную высоту и дополнительные стили для текста:


И при наведении курсора, мы просто установим TranslateX в значение 0: