Реклама
timeweb
falbar

И еще 30 CSS эффектов при наведении

5 ноября 2015 2337 0

Здравствуйте дорогие читатели! Наступило время пополнить коллекцию сайта ещё 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 добавляем своё изображение, а также описание к нему. Вот собственно и всё, использование второго набора происходит по аналогии, как в этом примере.

Реклама
Комментариев еще не оставлено
no_avatar