7 эффектов для изображений на CSS3
827материалов
228тем на форуме
3004комментария
6158пользователей

7 эффектов для изображений на CSS3


Описание:

Новые свойства CSS3 позволяют делать очень много всего интересного. Сегодня мы рассмотрим пример, в котором создадим 7 разных эффектов при наведении курсора мыши на изображение. Мы будем показывать поверх изображения описание. Следует учесть, что данный эффект будет работать только в современных браузерах, которые поддерживают нововведения CSS3. Основная идея здесь в том, чтобы создать сетку figure-элементов, и применить к ним эффекты при наведении, которые будут отображать подпись с заголовком, автором, а также кнопку с привязанной ссылкой.

Установка:

Для начала скачиваете архив с нашего сайта и папку effekts-css3 загружаете в свой файловый менеджер.

Далее перед тегом </head> вставляете код:
Код
<link rel="stylesheet" type="text/css" href="/effekts-css3/component.css" />
<script src="/effekts-css3/custom.js"></script>

Эффект №1 - демо

Код эффекта №1:
Код
<ul class="grid cs-style-1">
<li>
<figure>
<img src="Ссылка на изображение" alt="Название изображения">
<figcaption>
<h3>Название темы, материала и т.д</h3>
<span>Здесь Ваш текст</span>
<a href="Здесь ссылка">Название ссылки</a>
</figcaption>
</figure>
</li>
</ul>

Эффект №2 - демо

Код эффекта №2:
Код
<ul class="grid cs-style-2">
<li>
<figure>
<img src="Ссылка на изображение" alt="Название изображения">
<figcaption>
<h3>Название темы, материала и т.д</h3>
<span>Здесь Ваш текст</span>
<a href="Здесь ссылка">Название ссылки</a>
</figcaption>
</figure>
</li>
</ul>

Эффект №3 - демо

Код эффекта №3:
Код
<ul class="grid cs-style-3">
<li>
<figure>
<img src="Ссылка на изображение" alt="Название изображения">
<figcaption>
<h3>Название темы, материала и т.д</h3>
<span>Здесь Ваш текст</span>
<a href="Здесь ссылка">Название ссылки</a>
</figcaption>
</figure>
</li>
</ul>

Эффект №4 - демо

Код эффекта №4:
Код
<ul class="grid cs-style-4">
<li>
<figure>
<img src="Ссылка на изображение" alt="Название изображения">
<figcaption>
<h3>Название темы, материала и т.д</h3>
<span>Здесь Ваш текст</span>
<a href="Здесь ссылка">Название ссылки</a>
</figcaption>
</figure>
</li>
</ul>

Эффект №5 - демо

Код эффекта №5:
Код
<ul class="grid cs-style-5">
<li>
<figure>
<img src="Ссылка на изображение" alt="Название изображения">
<figcaption>
<h3>Название темы, материала и т.д</h3>
<span>Здесь Ваш текст</span>
<a href="Здесь ссылка">Название ссылки</a>
</figcaption>
</figure>
</li>
</ul>

Эффект №6 - демо

Код эффекта №6:
Код
<ul class="grid cs-style-6">
<li>
<figure>
<img src="Ссылка на изображение" alt="Название изображения">
<figcaption>
<h3>Название темы, материала и т.д</h3>
<span>Здесь Ваш текст</span>
<a href="Здесь ссылка">Название ссылки</a>
</figcaption>
</figure>
</li>
</ul>

Эффект №7 - демо

Код эффекта №7:
Код
<ul class="grid cs-style-7">
<li>
<figure>
<img src="Ссылка на изображение" alt="Название изображения">
<figcaption>
<h3>Название темы, материала и т.д</h3>
<span>Здесь Ваш текст</span>
<a href="Здесь ссылка">Название ссылки</a>
</figcaption>
</figure>
</li>
</ul>

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

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

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

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


Бармен
Роман как всегда красиво happy
Ромчик
Стараемся laughing
markin
markin @markin 28.10.2015 02:203
+1
Как всегда на высоте
Ромчик
Пожалуйста, не надо только одни лайки ставить, хоть немного текста добавляйте!
StimuL
Геннадий @StimuL 28.10.2015 20:356
0
вот это красота супер))
nuriman2015
Анатолий @nuriman2015 30.10.2015 07:408
0
а как добавить на страницах сайта
nuriman2015
Анатолий @nuriman2015 30.10.2015 10:129
0
и как сделать в два столбика, у чуть чуть уменьшить
DxBArt
DxBArt @DxBArt 30.10.2015 15:1810
0
Мне кажется, это надо делать в CSS
avatar
Rutina @rutina 31.10.2015 00:1811
0
Взять код и вставить. Что за тупые вопросы?
avatar
Anatoli Bazrov @sport 20.11.2015 09:5212
0
подскажите пожалуйста как сделать в два столбика??
Ромчик
C помощью CSS
avatar
Anatoli Bazrov @sport 09.12.2015 09:4214
0
как сделать в два столбика, что нужно добавить в CSS
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта