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

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

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

Демо слева:

Название
Раздел: Ваша категория girl


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

Код
<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 Апреля 2016 Загрузок: 1 Просмотров: 1727 Комментариев: (21)
Поделиться в социальных сетях

Материал разместил
Alex_L_X
Похожие материалы

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

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

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