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

 

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

Шаг 1. HTML

Структура состоит из списка с присвоенным параметром определенного контейнера, затем мы добавляем два класса zayn_2 shadow который отвечает за тень, а также класс pop, который отвечает за стилизацию подписей.

Структура состоит из подобных блоков, каждому блоку присвоен определенный класс который отвечает за его позицию и наполнение. Теперь давайте перейдем к следующему шагу.

Шаг 2. CSS

Основной эффект который есть фишкой наших блоков это есть покачивание блоков при наведении курсора мыши, покачивание мы реализуем с помощью следующий правил.

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

Вот и все. Готово!

Читайте также: