ЭФФЕКТ ВРАЩЕНИЯ ИЗОБРАЖЕНИЯ ПРИ НАВЕДЕНИИ
ЭФФЕКТ ВРАЩЕНИЯ ИЗОБРАЖЕНИЯ ПРИ НАВЕДЕНИИ-еще один эффект для изображения,который можно применить в информер виде материалов просто для изображения.Это нововведение выделит ваш сайт и привлечет внимание пользователя вашего сайта своей разнообразием
Установка:Код изображения
CSS
Установка:Код изображения
Код
<a class="borderwrap newsimg" href="http://www.csomsk.ru/" title="Игровой портал Counter-Strike"><div class="imagewrapper"><img src="http://www.csomsk.ru/_ld/38/82471945.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;}
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;}
Файлы для скачивания отсутствуют.
Поблагодарить автора
Автор: Turbo
Комментарии (0)