Показать Меню
falbar Эффект при наведении

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

Эффект при наведении

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

Источник
tympanus.net

Подписаться на обновления

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