Добро пожаловать на форум!
Новые сообщения Участники Правила форума Поиск RSS
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные пользователи Новые участники
Болт (3758)
Skyline (2679)
XemorDio (2451)
Strelok41 (2070)
voland989 [18.01.2017]
BobbyGaifs [18.01.2017]
JamesGyzlyuvy [18.01.2017]
Mariotem [18.01.2017]
Страница 1 из 11
Форум » Web-раздел » Скрипты uCoz » Эффект вращения изображения при наведении
Эффект вращения изображения при наведении
XemorDio Дата: Суббота, 10.09.2016, 17:21 | Сообщение # 1
Группа: Админы
Сообщений: 2451
Награды: 9 Репутация: 272
Статус: Offline

Суть скрипта заключается в том, что при наведении на картинку она немного поворачивается и увеличивается. Очень подходит для каталога файлов или модулей "Новости и Статьи".
Установка:
Код с изображением (под редактирование):
Код
<a class="borderwrap newsimg" href="http://stalker-danger.at.ua/" title="Игровой портал"><div class="imagewrapper"><img src="http://i.imgur.com/8i1cyo1.jpg" alt="Гигбар CS:GO" class="imagebig"/></div></a>
В Таблицу стилей (CSS) вставляем:
Код
.imagewrapper {
overflow: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;}
.imagewrapper:hover img {
-webkit-transform: scale(1.2) rotate(-7deg);
-moz-transform: scale(1.2) rotate(-7deg);
-ms-transform: scale(1.2) rotate(-7deg);
-o-transform: scale(1.2) rotate(-7deg);
transform: scale(1.2) rotate(-7deg);}
.imagewrapper img {
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;}
.imagebig {width:100%;display:block;}
.borderwrap {background: #fff;
border: 1px solid #e6e5e5;
border-collapse: separate;
padding:5px;
display:block;}
.newsimg {width:180px;margin: 0 10px 0 0;float:left;}
Примечание: размер изображения, угол наклона изображения и т.д легко отредактировать посредством изменения стилей CSS.
Форум » Web-раздел » Скрипты uCoz » Эффект вращения изображения при наведении
Страница 1 из 11
Поиск:
10:47
Обновить

Хостинг от uCoz | Design by XemorDio | MODSTALKER © 2009-2016