Здравствуйте дорогие читатели! Наступило время пополнить коллекцию сайта ещё 30-тью красивыми CSS эффектами при наведении курсора на картинку. Данная тема поистине очень обширна и мы не устаем пополнять нашу библиотеку все новыми и новыми эффектами.
Сегодня мы будем использовать CSS/CSS3 библиотеку, которая состоит из 2-ух наборов. Каждый из них находиться в отдельном файле set1.css и set2.css. Переходим на страницу демо, чтобы воочию удостовериться, о чём я веду речь – классные эффекты, не так ли? Скажу честно, самому не приходилось использовать ничего из предложенных вариантов, но это хорошо проработанные и, главное, красивые CSS эффекты, которые рано или поздно найдут пристанище в одном из проектов. К примеру: эти эффекты при наведении просто отлично будут смотреться в привью статей блога или новостного сайта.
Приступим. Всё по порядку.
Во-первых, подключаем стили с эффектами из первого набора:
<link href="css/set1.css" type="text/css" rel="stylesheet" />
Далее, не забываем добавить шрифты с иконками, которые находятся в папке fonts к себе в проект.
Теперь добавляем разметку:
<div class="grid">
<figure class="effect-lily">
<img src="img/12.jpg" alt="img12"/>
<figcaption>
<div>
<h2>Ваш <span>заголовок</span></h2>
<p>Подробное описание</p>
</div>
<a href="#">Подробнее</a>
</figcaption>
</figure>
</div>
Тут элемент с class=grid является обёрткой для картинки с эффектом effect-lily. Внутри элемента figure добавляем своё изображение, а также описание к нему. Вот собственно и всё, использование второго набора происходит по аналогии, как в этом примере.