JSFiddle - React, Tailwind, and code Playground

by Guillaume Lafarge

HTML

<ul>
	<li>
		<a href="javascript:void(0)" class="thumbnail">
			<img src="//placehold.it/350x180" class="thumbnail__image">
			<video width="640" height="360" src="//vjs.zencdn.net/v/oceans.mp4" class="thumbnail__video"></video>
			<div class="thumbnail__caption">
				<h2>Les oiseaux</h2><h3>Un film d'auteur</h3>
			</div>
		</a>
	</li>
	<li>
		<a href="javascript:void(0)" class="thumbnail">
			<img src="//placehold.it/350x180" class="thumbnail__image">
			<video width="640" height="360" src="//vjs.zencdn.net/v/oceans.mp4" class="thumbnail__video"></video>
			<div class="thumbnail__caption">
				<h2>Les oiseaux</h2><h3>Un film d'auteur</h3>
			</div>
		</a>
	</li>
	<li>
		<a href="javascript:void(0)" class="thumbnail">
			<img src="//placehold.it/350x180" class="thumbnail__image">
			<video width="640" height="360" src="//vjs.zencdn.net/v/oceans.mp4" class="thumbnail__video"></video>
			<div class="thumbnail__caption">
				<h2>Les oiseaux</h2><h3>Un film d'auteur</h3>
			</div>
		</a>
	</li>
	<li>
		<a href="javascript:void(0)" class="thumbnail">
			<img src="//placehold.it/350x180" class="thumbnail__image">
			<video width="640" height="360" src="//vjs.zencdn.net/v/oceans.mp4" class="thumbnail__video"></video>
			<div class="thumbnail__caption">
				<h2>Les oiseaux</h2><h3>Un film d'auteur</h3>
			</div>
		</a>
	</li>
	<li>
		<a href="javascript:void(0)" class="thumbnail">
			<img src="//placehold.it/350x180" class="thumbnail__image">
			<video width="640" height="360" src="//apa.cr2.streamzilla.xlcdn.com/df74f33165546ff4bed6fbec899bcf01/5706844e/sz/streamzilla/Streamzilla_Demo_Tablet.mp4" class="thumbnail__video"></video>
			<div class="thumbnail__caption">
				<h2>Les oiseaux</h2><h3>Un film d'auteur</h3>
			</div>
		</a>
	</li>
	<li>
		<a href="javascript:void(0)" class="thumbnail">
			<img src="//placehold.it/350x180" class="thumbnail__image">
			<video width="640" height="360" src="//vjs.zencdn.net/v/oceans.mp4" class="thumbnail__video"></video>
			<div...

SCSS

body {
	font-family:sans-serif;
	text-transform:uppercase;
}
ul { 
	list-style:none; 
	margin:0;
	padding:0;
	
	li { float:left; }
}

h2, h3 { margin:0; }

a { color:#fff; }

.thumbnail {
	position:relative;
	display:block;
	overflow:hidden;

	.thumbnail__image {
		position:relative;
		display:block;		
	}
	.thumbnail__video {
		position:absolute;
		left:50%;
		top:50%;
		transform:translate(-50%, -50%);
		transition:opacity 0.5s ease;
		opacity:0;
		height:100%;
		width:auto;
	}
	
	.thumbnail__caption {
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		display:flex;
		align-items:center;
		justify-content: center;
		flex-direction:column;
		text-align:center;
		background:rgba(0,0,0,0.2);
	}
}

.thumbnail:hover {
	.thumbnail__video {
		opacity:1;
	}
}

JavaScript

$('.thumbnail').each(function(e) {
	$(this).hover(function(e) {
		$(this).find('.thumbnail__video').get(0).play();
	},
	function(e) {
		$(this).find('.thumbnail__video').get(0).pause();
	});
});