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

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

tuxfighter

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

tuxfighter

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

tuxfighter

Гуру
Местный
а да, в итоге сделал так, если кому интересно:
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; /* без обрамления ;) */

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