• Страница 1 из 1
  • 1
Форум Сталкер » Web-раздел » Скачать скрипты для сталкера » Эффект вращения изображения при наведении
Эффект вращения изображения при наведении
XemorDioДата: Вторник, 17.05.2016, 11:43 | Сообщение # 1
Генерал-полковник
Группа: Пользователи
Сообщений: 897
Награды: 7
Репутация: 8
Статус: 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.
 
trem200Дата: Суббота, 21.05.2016, 22:30 | Сообщение # 2
Подполковник
Группа: Проверенные
Сообщений: 112
Награды: 1
Репутация: 1
Статус: Offline
Стоящая вещь, возможно заберу к себе на сайт 21
 
Форум Сталкер » Web-раздел » Скачать скрипты для сталкера » Эффект вращения изображения при наведении
  • Страница 1 из 1
  • 1
Поиск:
Поделись с другими сталкерами
Меню сайта
Гость
Статистика
Интеллектуальный каталог ресурсов интернет