» »

Вид материалов видео с hover наклоном


Вид материалов видео с hover наклоном

Вид материалов видео с hover наклоном при наведении, сто на изображение будет эффект. Который будет смотреться оригинально для любого интернет ресурса. Что сами можете в материале посмотреть и сами прикинуть, как все будет происходить. Здесь вы можете сам эффект разместить, так где вам нужно, но безусловно, чтоб картинки были, где то есть при наведение тени или по другому выделяется, здесь согласитесь очень стильно все сделано. Вид материалов видео с hover, где и прописан наклоно который происходит при наведении. 

Демо слева:



В вид материалов:

Код
<div class="sidebox-bd clr"><!-- <bc> -->
  <div class="tilt pic"><a href="$ENTRY_URL$">$TITLE$<br>Раздел: $CATEGORY_NAME$ <img alt="girl" src="$SCREEN_URL$" />
  </a>
  </div> </div>


В таблицу стилей КСС:

Код
/*Стиль всех блоков для картинок*/
.pic {background: #fff;
height: 228px;
width: 228px;
overflow: hidden; /*Скрывает все, что не влазит в блок*/
margin: 9px;
border: 10px solid #fff; /*Для всех браузеров*/
border: 10px solid #eee\9; /*Для IE6, IE7, IE8*/
-webkit-box-shadow: 2px 3px 10px #6E6E6E;
box-shadow: 2px 3px 10px #6E6E6E;
float: left;}
.pic:hover { cursor: pointer;}
/*размеры всех картинок по усолчанию*/
.pic img {
width: 220px;
height: 188px;}

/*небольшой наклон картинки*/
.tilt {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;}
.tilt:hover {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);}
26.04.2016 Загрузок: 1 Просмотров: 439 Комментарий: (12)

Поделиться в социальных сетях

Материал разместил

Комментарий: 12
Kosten
Kosten 26.04.2016 20:131
0
Alex_L_X, смотрится отлично, сам эффект хороший, и все в материале прописано с демонстрацией.
Сафрон
Сафрон 26.04.2016 20:232
0
Красиво смотрится, явно от других отличается.
FeStemBer
FeStemBer 26.04.2016 20:333
0
Да не чего такого сверхъестественного, простой эффект, который можно увидеть на многих сайтаз, но вот как его делать, в первые вижу.
Alex_L_X
Alex_L_X 26.04.2016 20:464
+1
Вот тоже прикольный вариант, в строке div class="tilt pic" заменить tilt на morph

ДЕМКА

Код
*Бордер с кругом*/
.morph {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.morph:hover {
border: 10px solid #333;
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);}
Kosten
Kosten 26.04.2016 20:585
0
Мне как то этот больше нравится. Там уж все резко происходит.
Kosten
Kosten 26.04.2016 21:016
0
Alex_L_X, вы сможете это меню разместить, такое в первые вижу.

Alex_L_X
Alex_L_X 26.04.2016 21:037
0
Kosten
Kosten 26.04.2016 21:169
0
Понятно, что то сразу и не увидел сходство.
Alex_L_X
Alex_L_X 26.04.2016 21:068
0
Код
/*Стиль всех блоков для картинок*/

/*Увеличение*/
.grow img {
height: 188px;
width: 188px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
.grow img:hover {
width: 300px;
height: 300px;
margin-left: -50px;
margin-top: -50px;}
/*Уменьшение*/
.shrink img {
height: 200px;
width: 200px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
.shrink img:hover {
width: 300px;
height: 300px;}
/*Сдвиг влево*/
.sidepan img {
width: 250px;
height: 200px;
margin-left: 0px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
.sidepan img:hover {
margin-left: -50px;}
/*небольшой наклон картинки*/
.tilt {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;}
.tilt:hover {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);}
/*Бордер с кругом*/
.morph {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.morph:hover {
border: 10px solid #333;
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);}
/*Нечеткая картинка*/
.blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
.blur img:hover {
-webkit-filter: blur(2px);}
/*ЧЕРНО-БЕЛОЕ*/
.bw {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
.bw:hover {
-webkit-filter: grayscale(100%);}
/*ЯРКОСТЬ*/
.brighten img {
-webkit-filter: brightness(100%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
.brighten img:hover {
-webkit-filter: brightness(60%);}
/*Сепия*/
.sepia img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
.sepia img:hover {
-webkit-filter: sepia(100%);}
/*КОНТРАСТ*/
.contrast img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
.contrast img:hover {
-webkit-filter: contrast(185%);}
/*Инверсия*/
.invert img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
.invert img:hover {
-webkit-filter: invert(100%); }
/*СРАЗУ МНОГО Эффектов*/
.opacity img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.opacity img:hover {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
width: 300px;
height: 300px;
margin-left: -60px;
margin-top: -10px}

Вот все эффекты а вот и ДЕМО на все эффекты Вы можете вырвать отдельно нужный вам эффект
Kosten
Kosten 26.04.2016 21:1710
0
Не чего себе, столько эффектов, можно любой подобрать и установить.
Alex_L_X
Alex_L_X 26.04.2016 21:2011
0
Ага, но именно на вид видео пара только подойдёт, но к примеру на фотогалерею или другой вид материалов вполне симпатично можно подогнать просто подогнав размер и заменив операторы
Kosten
Kosten 26.04.2016 21:3812
0
Вот и подумал, что для категорий фотографий, такой эффект, бы отлично подошел, но встречал его на вид материала файлов.
avatar