Логин:
Пароль:
Страница 1 из 11
Форум » О uCoz » Скрипты » Эффект при наведении на картинку на CSS3
Эффект при наведении на картинку на CSS3
AndreyДата: Вторник, 22.12.2015, 10:50:31 | Сообщение # 1
Технарь
Offline
3

CSS3 является прекрасной технологией, которая поможет вам создать по-настоящему потрясающие вещи. Использую всю эту мощь, вы можете добавить любые разновидности визуальных эффектов для картинок на ваш ресурс. Поэтому, сегодня мы поговорим об эффектах наведения CSS3. Я подготовил данное решение, которое Вам позволит любую галерею изображений превратить в современный и стильный шедевр. Эффекты при наведении на картинки никого не оставят равнодушными!

ДЕМО

После /head на нужных страницах вставьте:
Код
<link rel="stylesheet" type="text/css" href="/css/figure.css">


Галерея картинок оформляется вот так:
Код
<div id="box" class="burst-circle teal">
<div class="caption"></div>
<img src="Ссылка_на_картинку">
<h1>Описание к картинке</h1>
</div>
<div id="box" class="burst-circle strawberry">
<div class="caption"></div>
<img src="Ссылка_на_картинку">
<h1>Описание к картинке</h1>
</div>
<div id="box" class="burst-circle grape">
<div class="caption"></div>
<img src="Ссылка_на_картинку">
<h1>Описание к картинке</h1>
</div>
<div id="box" class="burst-circle orange">
<div class="caption"></div>
<img src="Ссылка_на_картинку">
<h1>Описание к картинке</h1>
</div>


Обратите внимание на класс burst-circle – вы можете использовать один из нескольких классов для применения одного из нескольких эффектов, соответственно. На данный момент доступны классы: burst-circle, burst-rumb, burst-up, burst-side, triangle, triangle-side
Осталось лишь залить четыре PNG файла из прикреплённого архива в папку img и CSS файл в папку css
Для того чтоб скачать прикреплённые файлы нужно Зарегестрироватся, или войти на сайт под своим логином
 
профиль
Форум » О uCoz » Скрипты » Эффект при наведении на картинку на CSS3
Страница 1 из 11
Поиск: