JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container-img">
    <div class="image-title">LOREM IPSUM</div>
    <img class="image" src="https://www.google.fr/images/srpr/logo11w.png" />
</div>

CSS

*{
	margin: 0;
	padding: 0;
	border: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    outline: 0;
}
.container-img{
    position: relative;
    background: #cccccc;
    width: 230px;
    overflow: hidden;
}
.container-img .image-title{
    position: absolute;
    background: rgba(0,0,0,0.8);
    opacity: 0;
    margin: 0 auto;
    padding: 200px 0 0 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    color: #ffffff;
    text-align: center;
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
    z-index: 10;
}
.container-img:hover .image-title{
    opacity: 1;
    padding: 35px 0 0 0;
}
.container-img .image{
    position: relative;
    max-width: 100%;
    z-index: 0;
}