есть вот такой сайт
справа внизу 2 блок «Блог» и «Клуб»
справа внизу 2 блок «Блог» и «Клуб»
при наведении курсора статистическая картинка сменяется зацикленным видео (или может быть гифка).
в итоге сделал так, если кому интересно:
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; /* без обрамления ;) */
}