<div class="video-link">
<img class="thumbnail" src="//cyara.com/wp-content/uploads/videos/image-video-xchange-2019-mark-remington-amy-hudson-x-ns.jpg">
</div>
.video-link {
display:block;
width:600px;
height:400px;
border:2px solid #666;
margin: 10px auto;
overflow:visible;
position:relative;
background-color:#bbb;
cursor: pointer;
}
.video-link .thumbnail {
width:100%;
object-fit: contain;
object-position: center;
}
.video-link::after {
content:"";
display:block;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background-image:url("//cyara.com/wp-content/uploads/resources/play-button.png");
background-position: center center;
background-repeat:no-repeat;
background-size:20%;
filter: drop-shadow(0 0 10px rgba(0,0,0,.4));
}
.video-link:hover::after {
background-size:22%;
-webkit-transition: background-size .2s ease-in-out;
-moz-transition: background-size .2s ease-in-out;
-o-transition: background-size .2s ease-in-out;
transition: background-size .2s ease-in-out;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.