JSFiddle - React, Tailwind, and code Playground

HTML

<a href="http://google.fr" class="wrapper" target="_blank">
    <span class="text">
        galerie #1
   </span>
    <img src="http://cdn-2.medievalchronicles.com/wp-content/uploads/2015/01/Byzantine-art-copy.jpg?e2299c">
</a>

<a href="#" class="wrapper">
    <span class="text">
        galerie #2
    </span>
    <img src="http://www.numo.si/uploads/img-566-mid.jpg">
</a>

<a href="#" class="wrapper">
    <span class="text">
galerie #3
</span>
    <img src="http://www.projectgraphics.eu/fo/20121019111335425_thumb.jpg">
</a>

CSS

.wrapper {
    position: relative;
    padding: 0;
    width:400px;
    display:block;
     width: 400px;
    height: 210px;
}


.text {

  background-image: url(https://78.media.tumblr.com/9cc52714f9abbb29c0eb9909ac86e655/tumblr_p2h0qjBsJa1wxtqaoo1_400.png);
    position: absolute;
    top: 0;
    color:red;
    width: 400px;
    height: 200px;
    line-height:100px;
    text-align: center;
    z-index: 10;
    opacity: 0.9;
     filter: alpha(opacity=90);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.text:hover {
    opacity:0;
}

img {
    z-index:1;
}
span.text
{
  font-size: 20px;
  font-family:'Exo 2', sans-serif;
font-variant: small-caps;
font-weight: bold;
  width: 400px;
  height: 200px;
  color: #FFF;
  text-align: center;
  line-height: 200px; /* Magic Trick to align text " vertically " */
}