Библиотека hover-эффектов для фотографий imagehover.css

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

Из этого урока вы узнаете:

• Подключение библиотеки в свой проект
• Пример использования библиотеки

1) Подключение библиотеки в свой проект

Для начала необходимо скачать исходники библиотеки. Сделать это можно либо на ее сайте, либо по прямой ссылке с GitHub. Также можно установить библиотеку через npm или CDN.

Для установки через npm необходимо ввести следующие команды:

npm init
npm install imagehover.css

Если вы захотите установить библиотеку через CDN, то достаточно в тег link вставить ссылку:

https://cdnjs.cloudflare.com/ajax/libs/imagehover.css/2.0.0/css/imagehover.min.css

Мы же скачаем исходники, скопируем библиотеку в свой проект и подключим:

Сайт библиотеки: 👉 http://imagehover.io/

Прямая ссылка на скачивание: 👉 Скачать

После скачивания мы получим вот такой архив:

В этом архиве нам нужно зайти в папку css и скопировать оттуда к себе в проект файл imagehover.css либо его минифицированную версию imagehover.min.css

После копирования этого файла в проект наш стартовый шаблон будет выглядеть следующим образом:

2) Пример использования библиотеки

Вот пример простейших hover-эффектов, которые можно реализовать с помощью данной библиотеки(gif):

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

Общий шаблон для создания hover-эффекта выглядит так:

Тег figure содержит класс с названием анимации. Внутри этого тега находится тег с нашей картинкой img, а также тег figcaption, в который можно добавить контент, выводящийся при наведении на фотографию. Также можно в тег figure добавить тег a. Тогда при клике на фотографию пользователя будет перенаправлять на указанный в теге сайт.

Теперь попробуем собрать что-то своё. Добавим в тег body нашего стартового шаблона такой код:

Что мы сделали:

• Создали внешний блок div с классом container для того, чтобы управлять нашим элементом
• Вставили шаблон для создания hover-эффекта и назначили ему эффект imghvr-zoom-out-flip-vert
• В теге img указали ссылку на используемую нами картинку
• В теге figcaption создали сообщение, которое выводится при наведении на изображение
• Добавили в figure тег a, чтобы при клике на изображение, пользователя перенаправляло в наш telegram канал

Теперь все уже будет работать, но для красоты добавим немного CSS-кода:

Здесь мы изменили шрифт на Arial, переместили наш элемент в центр экрана по горизонтали и сдвинули на 200 пикселей ниже, ограничили размер нашего элемента, добавили ему закругления и сделали побольше шрифт текста.

А вот наш результат(gif):

Так мы за считанные минуты создали довольно красивый hover-эффект для нашего сайта. Кроме текста, в тег figcaption можно вставлять другие ссылки, иконки, и даже фотографии. На официальном сайте библиотеки вы сможете увидеть все доступные эффекты, советуем попробовать самостоятельно написать пару hover-эффектов для себя.

Надеемся, что информация была актуальна и полезна. Изучайте и применяйте изученное в своих проектах.

До скорой встречи!

Ссылка на канал: https://t.me/sitodel