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

[Saivior]

Рассмотрим библиотеку imagehover.css
Что такое imagehover.css? - Это библиотека которая поволяет вам легко реализовать эффекты при наведении на изображение.
В бесплатной версии библиотеки содержится 44 эффекта.

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

1. Заходим на официальный сайт

Пожалуйста, авторизуйтесь для просмотра ссылки.

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

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

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

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

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

Спойлер: код

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

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

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

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

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

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

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

Пожалуйста, авторизуйтесь для просмотра ссылки.