Эффект при наведении на картинку на CSS3
827материалов
228тем на форуме
3003комментария
6152пользователя

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


Описание:

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

Установка:

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

2. Галерея картинок оформляется вот так:
Код
<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-circleburst-rumb,burst-upburst-sidetriangletriangle-side
Осталось лишь залить четыре PNG файла из прикреплённого архива в папку img и CSS файл в папку css

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 09.12.2015 в 07:00
Материал просмотрен: 2293 раза
Категория материала: Скрипты для uCoz
К материалу оставлено: 6 комментариев

Пожаловаться
Сказать спасибо

6 комментариев


NarutoPro
Влад @NarutoPro 09.12.2015 16:261
+7
Спасибо, очень красивые эффекты like like like
maks@@@
Красиво! like like like
favorite-trade
Где прописать border-radius: 50%; Чтобы изображение до после и во время анимации была круглой?
avatar
Здравствуйте. Эффекты можно заменить?
Ромчик
Не понял, свои хотите добавить?
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта