Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Hover to play video
.viewport {
position: relative;
width: 300px;
height: 300px;
.viewport:hover img {
opacity: 0;
.viewport:hover video {
opacity: 1;
img {
height: 100%;
width: 100%;
opacity: 1;
border-radius: 50%;
.fade {
transition: opacity .5s ease-in-out;
video {
height: 300px;
width: 300px;
border-radius: 150px;
position: absolute;
top: 0px;
opacity: 0;
<div class="viewport">
<img class="fade" src="">
<video id="video" class="fade">
<source src="" type="video/mp4">
Your browser does not support HTML5 video.
<div class="mask">hi</div>
var viewport = document.getElementsByClassName('viewport')[0]
var video = document.getElementById('video')
viewport.addEventListener('mouseover', function() { }, false);
viewport.addEventListener('mouseout', function() { video.pause() }, false);

This comment has been minimized.

Copy link

commented Mar 29, 2018


For more than one pictures use this one:

var vid = document.getElementsByTagName("video");
[], function (item) {
item.addEventListener('mouseover', hoverVideo, false);
item.addEventListener('mouseout', hideVideo, false); });

function hoverVideo(e){;
function hideVideo(e){

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.