Данное решение позволит любую галерею изображений превратить в современный и стильный шедевр. Эффекты при наведении на картинки никого не оставят равнодушными!
Для начала посмотрите
ДЕМО
Моё тестирование в фидле:
КЛИК
Установка:
1#: После /head на нужных страницах вставьте:
|
|
<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Автор публикации
12
Я не понял вашего вопроса, но постараюсь на него ответить...
