Frontender`s Spectre - бот Telegram, который собирает контент для фронтенд-разработчиков в одном месте. Бесплатно.
плагин jquery при наведении

Mate Hover — 12 вариантов анимации при наведении с помощью jQuery

Mate Hover – это специальный плагин jQuery для создания анимации при наведении курсора на блок или изображение. Можно использовать свои иконки, текст и т.д.

В наборе предоставляются 12 разных стилей анимации. Отлично смотрятся на всех устройствах и браузерах. Вот перечень особенностей плагина jQuery CSS Hover эффекты:

  • Адаптивный дизайн и поддержка Retina-дисплеев;
  • Простой в использовании;
  • Предварительный просмотр;
  • Кроссбраузерность;
  • Минимальный размер: всего 8 кб.;
  • Полностью настраиваемый;
  • Умеет автоматически подстраивать размер;
  • Поддерживает 30 анимаций jQuery Easing.

пример работы анимации

Использование плагина jQuery

Подключаем необходимые файлы стилей и скриптов

<!-- ФАЙЛ СТИЛЕЙ -->
<link rel="stylesheet" href="css/mate_hover/mate.hover.css" type="text/css" />

<!-- ФАЙЛЫ СКРИПТОВ -->
<script type="text/javascript" src='jQuery/jquery-1.9.1.min.js'></script>
<script src="jQuery/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.mate-hover.1-1-min.js" type="text/javascript"></script>

Структура HTML кода блоков будет выглядеть следующим образом

<div class="info">
	Overlay Classic, Pop Up Position: x
	
	<div data-zlname="test">
		<img src="image/classic.jpg">
		<div data-zl-popup="link">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id diam eros. Nunc sit amet velit lacus, sed accumsan dolor. Ut luctus massa eu odio porta bibendum. Aliquam erat volutpat
		</div>
	</div><!-- test close -->

</div><!-- demo info close -->

Идентифицируем блок по атрибуту data-zlname=»test» и пишем для него скрипт с опциями

$('[data-zlname = test]').mateHover({
	position: 'x',
	overlayStyle: 'classic',
	overlayOpacity: 0.7,
	popupEasing: 'easeOutQuint'
});

В данном случае приведен самый просто пример. Все остальные Вы найдете в файле index.html предоставленного архива. Скачать плагин jQuery CSS Hover эффекты можно по ссылке ниже.