Страница 1 из 11
Форум » Скрипты для uCoz » Другие скрипты для uCoz » Эффект размытого изображения при наведении
Эффект размытого изображения при наведении
Lexarus
Offline
Дата: Среда, 09.11.2016, 19:34 | Сообщение # 1
Постов: «3519»
Лучший админ

Установка:
1. Код вызова скрипта, размещаем код по месту вывода изображений:
Код
<div class="game-img"><a href="http://www.csomsk.ru/publ/counter_strike_1_6/kiber_shkola/kiber_shkola_14_de_dust2/17-1-0-311" title="Кибер школа #14 de_dust2"><img src="http://www.csomsk.ru/_pu/3/47955822.jpg" alt="Карта de_dust2" title="Кибер школа #14 de_dust2" border="0"><i class="playgameID">Смотреть</i></a></div>


2. В таблицу стилей CSS вставляем:
Код
.game-img {height: 200px; width: 300px; position: relative; overflow: hidden;display: inline-block;}
.game-img img {height: 200px; width: 100%; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; transition: all 0.4s ease;}
.game-img:hover i.playgameID:hover { background-color: rgba(38, 43, 46, 1); }
.game-img:hover i.playgameID { opacity: 1; z-index: 300; }
.game-img:hover img { -webkit-filter: blur(2px); filter: blur(2px); } .imgone:hover { z-index: 10; }
.playgameID {-webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; transition: all 0.4s ease; opacity: 0; width: 80px; height: 30px; top: 70px; left: 110px; position: absolute; text-align: center; line-height: 26px; color: #FCE1CD; border-radius: 2px; background-color: rgba(38, 43, 46, 0.8); margin: 20px 0; font-family: 'Tahoma'; font-style: normal; font-size: 14px;}


Посмотреть DEMO версию скрипта можно не устанавливая на сайт, просто кликните на слово "дэмо" рядом со значком просмотра.

P/S Отредактировать скрипт под "себя" может каждый.
Прикрепления: 4824787.jpg(64Kb) · sliderdemo.htm(5Kb)
Форум » Скрипты для uCoz » Другие скрипты для uCoz » Эффект размытого изображения при наведении
Страница 1 из 11
Поиск: