Статья Библиотека imagehover.css

Saivior

Интересующийся

Saivior

Интересующийся
Статус
Оффлайн
Регистрация
20 Июн 2019
Сообщения
14
Реакции
8
Рассмотрим библиотеку imagehover.css
Что такое imagehover.css? - Это библиотека которая поволяет вам легко реализовать эффекты при наведении на изображение.
В бесплатной версии библиотеки содержится 44 эффекта.

Подключение библиотеки:

1. Заходим на официальный сайт
Пожалуйста, авторизуйтесь для просмотра ссылки.
и качаем архив с библиотекой (imagehover.css-master.zip).
2. Вытягиваем файл imagehover.min.css (в папке css) и бросаем его в нашу папку с проектом.
3. Подключаем его как обычные стили css в заголовке проекта.

HTML:
<link rel="stylesheet" href="imagehover.min.css">

Важно: imagehover.min.css должен быть подключён самым первым, т.е до наших стилей css и других библиотек!

Использование библиотеки:


В тело нашего проекта вставляем такой код:

HTML:
    <figure class="imghvr-fade"> <!-- Название нашей анимации -->
        <img src="https://avotar.ru/avatar/krutye/150/78.jpg"> <!-- Картинка -->
        <figcaption>
          content <!-- Текст который будет отображаться при наведении на картинку -->
        </figcaption>
    <a href="#">Link</a> <!-- Переход на ссылку при нажатии на картинку(опционально) -->
      </figure>
    </div>

Изменение цвета заднего фона:

Переходим в наши стили css и вставляем такой код:

CSS:
[class^='imghvr-'],
[class*='imghvr-'] { /*Изменяет цвет на красный при проигрывании анимации*/
  background-color: red;
}

[class*=" imghvr-"] figcaption, [class^=imghvr-] figcaption /*Изменяет цвет на синий когда анимация окончилась*/
{
    background-color: blue;
}

В итоге мы получаем такой эффект:

Desktop 2022.04.08 - 21.18.46.04.gif


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