30 hover effects для вашего сайта

hover effects — это эффекты при наведении мышки на любой объект. С помощью таких эффектов можно значительно расширить функционал вывода картинок, добавить различные пояснения и многое другое.

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

Приводить здесь все стили не имеет смысла, так как общий код на 30 hover effects превышает тысячу строк. Все стили вы можете скачать по этой ссылке — исходники hover effects

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

надежный хостинг

<figure class="bias">
<img src="img/1.jpg" alt="img1"/>
<figcaption>
<div>
<h2><span>смещение</span></h2>
<p>Картинка смещается и становится яркой</p>
</div>
</figcaption>
</figure>

Преимущество такой разметки, заключается в ее универсальности. Тег div может содержать любую информацию, ссылки, картинки и даже видео

Чтобы настроить hover effects, нужно:

  • выбрать понравившийся стиль, он доступен для скачивания в начале статьи
  • скопировать блок стилей в основной css вашего сайта (чаще всего style.css)
  • создать разметку на странице сайта. Количество блоков figure class="bias" неограниченно, так же к каждому из них можно применять разные эффекты наведения
  • заменить класс на понравившийся эффект (figure class="bias", заменить на любой другой)

Готовые hover effects для вашего сайта

  1. class="bias" — Смещение
  2. class="blackout" — Затемнение
  3. class="offset-v2" — Смещение v2
  4. class="over" — Перекрытие
  5. class="cadre" — Появление рамки
  6. class="cadre-v2" — Появление рамки v2
  7. class="new-txt" — Появление нового текста и подчеркивание
  8. class="text-frame" — Текст в рамке
  9. class="cadre-v3" — Появление рамки v3
  10. class="cadre-v4" — Появление рамки v4
  11. class="animation" — Анимация
  12. class="animation-v2" — Анимация v2
  13. class="text"- Появление текста
  14. class="cadre-v5" — Появление рамки v5
  15. class="text-v2" — Появление текста v2
  16. class="text-v3" — Появление текста v3
  17. class="block" — Дополнительный блок
  18. class="block-v2"- Дополнительный блок v2
  19. class="block-v3" — Дополнительный блок v3
  20. class="cadre-v6" — Появление рамки v6
  21. class="block-v4" — блок v4
  22. class="block-v5" — блок v5
  23. class="text-v4" — Появление текста v4
  24. class="block-v6" — блок v6
  25. class="text-v5" — Появление текста v5
  26. class="text-v6" — Появление текста v6
  27. class="text-v7" — Появление текста v7
  28. class="text-v8" — Появление текста v8
  29. class="block-v7" — Появление блока v7
  30. class="block-v8" — Появление блока v8

Для облегчения поиска нужного блока стилей, в исходниках были добавлены комментарии. Каждый блок имеет название, которое соответствует названию на demo странице и списку, приведенному выше.

Скачать таблицы стилей для hover effects

надежный хостинг
Поделиться в социальных сетях:

Еще по теме

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *