JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<div class="divimg">
	<a href="#">
		<img src="http://nemrod98.altervista.org/img/vid6.png" width="275px" height="175px" alt="Video" />
			<span>Coucou</span>	
	</a>
</div>



</body>

CSS

body{
margin : 0;
padding : 0;
font-family : "Trebuchet MS";
}

a{
	text-decoration : none;
}
.divimg{
	margin : 40px;
	width : 275px;
	height : 175px;
	border : 3px solid #a9a9a9;
	text-align : center;
	overflow : hidden;
	display : inline-block;
}
.divimg span{
	color : purple;
	background-color : black;
	width : 275px;
	height : 175px;
	display : block;
	transition : 1s;
	position : relative;
	opacity : 0.8;
}
.divimg:hover span{
	margin-top : -179px;
	transition : 1s;
}