<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;
	}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.