Ховер-эффекты с наложенными друг на друга фотографиями

Возвращаясь к теме "Сдвиг частей фотографии в разные стороны" сделал еще несколько примеров, как использовать наложенные друг на друга одинаковые фотографии для создания интересных ховер эффектов

Увеличение фото от центра

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

Эффект подходит для картинок любого размера и хорошо может подойти для фотогалерей.

Разрезанное фото

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

Вариант немного креативный и подойдет не для всех фотографий и не для всех размеров. Но при желании можно подкрутить проценты свойств clip-path и transform.

Глитч ховер эффект:

В данном примере используется 5 одинаковых фото. Одна остается на месте, а четыре другие смещаются при наведении курсора в разные стороны. Чтобы это смещение было интереснее - используем анимацию.

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

По желанию можно добавить на ховер дополнительных фотографий CSS фильтры.

Горизонтальные жалюзи:

В примере используется 5 одинаковых фото, как в заметке "Сдвиг частей фотографии в разные стороны". Только мы не сдвигаем части, а крутим на 360 градусов.

Спиннер частей фотографии

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

Пятая фотография служит для определения высоты и фоном в момент кручения

Эффект лучше всего смотрится на квадратных изображениях.

Фотографии kellepics

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!