Галерея картинок с эффектами при наведении на CSS3 и спрайтах
Данное решение позволит любую галерею изображений превратить в современный и стильный шедевр. Эффекты при наведении на картинки никого не оставят равнодушными!
Для начала посмотрите ДЕМО
Моё тестирование в фидле: КЛИК
Установка:
1#: После /head на нужных страницах вставьте:
|
1 |
<link rel="stylesheet" type="text/css" href="/css/figure.css"> |
2#: Галерея картинок оформляется вот так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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
