3D hover-эффект ориентированный на направление курсора

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

Пример:

  • Название фотографии

    Описание фотографии.

  • Название фотографии

    Описание фотографии.

  • Название фотографии

    Описание фотографии.

  • Название фотографии

    Описание фотографии.

  • Название фотографии

    Описание фотографии.

  • Название фотографии

    Описание фотографии.

  • Название фотографии

    Описание фотографии.

  • Название фотографии

    Описание фотографии.

  • Название фотографии

    Описание фотографии.

  • Название фотографии

    Описание фотографии.

  • Название фотографии

    Описание фотографии.

  • Название фотографии

    Описание фотографии.

Обратите внимание: переход корректно работает только на квадратных блоках

HTML:

CSS:

Обратите внимание: если всплывающий блок при уходе курсора пропадает не полностью (возможно на квадратах большого размера) - нужно увеличить значение perspective: 500px;

JS:

Решение найдено на codepen.io у пользователя Noel Delgado
Автор фотографий kellepics

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

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

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

Комментарии:

  • Алита:

    Здравствуйте.Попробовала поставить замечательный скрипт на сайт dle почему то всплывающего названия нет….Можете помочь?

    Ответить
    • Alexander:

      Нужно видеть страницу, я же не могу понять что там у вас ……

      Ответить