JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="gallerie">
					<!--
					--><li><img src="http://bit.ly/1JZvVYk"/><a class="hover" href="#">Lorem Ipsum</a></li><!--
					--><li><img src="http://bit.ly/1JZvVYk"/><a class="hover" href="#">Dolor Sit Amen</a></li><!--
					--><li><img src="http://bit.ly/1JZvVYk"/><a class="hover" href="#">Consectetur</a></li><!--
					-->
				</ul>

CSS

.gallerie li
{
position : relative;
display : inline-block;
list-style-type : none;
width : 27.5%;
margin-right :5%;
margin-bottom : 20px;
border : 2px solid #ff8262;
overflow : hidden;
}

.gallerie li img
{
width : 100%
}

.hover
{
opacity : 0;
position : absolute;
background-color : rgba(0,0,0,0.7);
width : 100%;
height : 100%;
top : 0px;
left:0px;
text-align : center;
padding-top : 45%;
font-family : Ubuntu;
font-weight : 300;
color : #ff8262;
text-decoration : none;
}

.gallerie li:hover .hover
{
opacity : 1;
transition : all 0.2s ease-in-out;
}