JSFiddle - React, Tailwind, and code Playground

HTML

<div class="visual">
    <img  alt="" height="604" width="397" src="http://userserve-ak.last.fm/serve/_/58501407/Elvira+T+x_0ca8e037.jpg" />
    <a href="#" class="more">view all</a>
</div>
<div class="visual">
    <img  alt="" height="604" width="397" src="http://userserve-ak.last.fm/serve/_/58501407/Elvira+T+x_0ca8e037.jpg" />
    <a href="#" class="more hidden">view all</a>
</div>

CSS

.visual{
    height:604px;
    position:relative;
    width:397px;
}

.visual img{vertical-align:top;}
.visual .hidden{display:none;}
.visual:hover .hidden{display:block;}
.visual .more{
    background:rgba(0,0,0,.3);
    color:#fff;
    font:bold 14px/16px Verdana, sans-serif;
    left:50%;
    margin:-9px 0 0 -100px;
    padding:5px;
    position:absolute;
    text-align:center;
    text-decoration:none;
    top:50%;
    width:200px;
}