• Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!
  • Темы озаглавленные с маленькой буквы удаляются без предупреждения!

Анимация при наведении

Image CMS

tuxfighter

Гуру
Местный
#1
есть вот такой сайт справа внизу 2 блок "Блог" и "Клуб"
при наведении курсора статистическая картинка сменяется зацикленным видео (или может быть гифка).
Как это сделано? в идеале, если кто знает такой плагин....
пока что примерно повторил это на CSS, но стойкое ощущение, что не так делаю.....
 

tuxfighter

Гуру
Местный
#3
спасибо, прочитал про тег, как вставляется видео понял.......
ну и стало понятнее что именно искать в плагинах -))
 

tuxfighter

Гуру
Местный
#4
а да, в итоге сделал так, если кому интересно:
html
HTML:
<a class="videofront" href="/novosti/">
<video src="/wordpress/wp-content/uploads/2016/09/blog_VP8.webm" poster="/wordpress/wp-content/uploads/2016/09/news-go.jpg" loop="on" autoplay="on" height="197" width="350"/></a>
css
Код:
.videofront {

display:block; /* Устанавливаем */

width:350px; /* Ширина и высота картинки */

height:197px;

background:url(/wordpress/wp-content/uploads/2016/09/news-go.jpg) no-repeat; /* Заливаем блок статичной картинкой */

}


/* Как видно, начальное (статическое) изображение задано как фон блока с шириной и высотой этого изображения. */

a.videofront video {

visibility:hidden; /* Aнимация не была видна в ситуации, когда мышь не наведена */

}

a.videofront:hover {

background:none; /* Фон (статичное изображение) не было видно при наведении мыши */

}

a.videofront:hover video {

visibility:visible; /* При наведении анимация показывается */

border:0; /* без обрамления ;) */

}
 
Сверху Снизу