JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="cats">
<li><a href="">
    <img src="//pp.vk.me/c629219/v629219230/e9fb/MitWt3AciRk.jpg" alt="" />
    <div class="text"><div class="vertical-align">
    	<strong>Это котик</strong>
    	<span>мой наркотик</span>
    </div></div></a>
</li>
    <li><a href="">
    <img src="//pp.vk.me/c629219/v629219230/e9fb/MitWt3AciRk.jpg" alt="" />
    <div class="text"><div class="vertical-align">
    	<strong>Это котик</strong>
    	<span>мой наркотик</span>
    </div></div></a>
</li>
    <li><a href="">
    <img src="//pp.vk.me/c629219/v629219230/e9fb/MitWt3AciRk.jpg" alt="" />
    <div class="text"><div class="vertical-align">
    	<strong>Это котик</strong>
    	<span>мой наркотик</span>
    </div></div></a>
</li>
</ul>

CSS

*{font-family: 'Roboto', sans-serif;font-size:14px}
html{min-height:100%;height:100%;width:100%;margin:0;padding:0}
#cats {position:relative; display: block; list-style:none; width: 100%; margin:0 auto; text-align:center;}
#cats li {position: relative;margin: 0px auto;overflow: hidden;display: inline-block;float: left;width: 20%;transition: all .15s linear
}
#cats li a {display: block;}
#cats li img {display:block; position:relative;width:100%;}

#cats li .text .vertical-align {transform: translate(-50%, -50%);top: 50%;left: 50%;position: absolute;width: 80%;display: block;}

#cats li .text {
    background: rgba(46, 50, 53, 0.8);
    position: absolute;
    text-align: left;
    top: 0px;left: 0px;
    margin: 0px;
    height: 100%;
    width: 100%;
    opacity: 0;
    -webkit-transition: all .15s linear
}
#cats li:hover {
    -webkit-transition: all .15s linear
}
#cats li:hover .text {background: rgba(46, 50, 53, 1);opacity: 1; -webkit-transition: all .15s linear}


#cats li .text strong {display: block;font-size: 15px;color: #FFF;font-weight: 300;}
#cats li .text span {font-size: 14px;color: #fff;cursor: pointer;font-weight: 300;}