ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Вид материалов видео с hover наклоном

Вид материалов видео с 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);}
2016-04-26 Загрузок: 1 Просмотров: 1249 Комментарий: (21)

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

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

Оставь свой отзыв

Комментарий: 21
Kosten
Kosten 2016-04-26 20:131
0
Alex_L_X, смотрится отлично, сам эффект хороший, и все в материале прописано с демонстрацией.
Сафрон
Сафрон 2016-04-26 20:232
0
Красиво смотрится, явно от других отличается.
FeStemBer
FeStemBer 2016-04-26 20:333
0
Да не чего такого сверхъестественного, простой эффект, который можно увидеть на многих сайтаз, но вот как его делать, в первые вижу.
Alex_L_X
Alex_L_X 2016-04-26 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 2016-04-26 20:585
0
Мне как то этот больше нравится. Там уж все резко происходит.
Kosten
Kosten 2016-04-26 21:016
0
Alex_L_X, вы сможете это меню разместить, такое в первые вижу.

Alex_L_X
Alex_L_X 2016-04-26 21:037
0
Kosten
Kosten 2016-04-26 21:169
0
Понятно, что то сразу и не увидел сходство.
Alex_L_X
Alex_L_X 2016-04-26 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 2016-04-26 21:1710
0
Не чего себе, столько эффектов, можно любой подобрать и установить.
Alex_L_X
Alex_L_X 2016-04-26 21:2011
0
Ага, но именно на вид видео пара только подойдёт, но к примеру на фотогалерею или другой вид материалов вполне симпатично можно подогнать просто подогнав размер и заменив операторы
Kosten
Kosten 2016-04-26 21:3812
0
Вот и подумал, что для категорий фотографий, такой эффект, бы отлично подошел, но встречал его на вид материала файлов.
Grician
Grician 2021-03-02 12:5713
0
А адаптировать как то можно?
Grician
Grician 2021-03-02 12:5814
0
Или может кто даст адаптивный вид материалов под видео?
Kosten
Kosten 2021-03-02 15:3515
0
Смотря на какой плеер, так как некоторые делают переключатели плееров, в дальнейшем адаптируют под мобильные аппараты.
Grician
Grician 2021-03-02 16:2816
0
Имеется виду вид материалов адаптированный.
Kosten
Kosten 2021-03-02 19:1117
0
Но у менч кино сайт, и там безусловно вид материала и комментариев, и каркас под плеер, это переключатели, так как несколько плееров устанавливаю. А если один ставить, то здесь главное, чтоб сайт был адаптивный.
1 2 »
avatar