JSFiddle - React, Tailwind, and code Playground

by mmansion

HTML

<a href="http://wintermoonblog.com/">
<div id="interviews">
    <img src="http://wintermoonblog.files.wordpress.com/2014/02/cropped-wintermoonlogo.jpg"/>
    <span>Interviews</span>
</div>
</a>

CSS

#interviews {
    text-align: center;
    max-width: 200px;
    max-height: 200px;
    overflow: hidden;
    
}
#interviews span {
   color: white;
   position: relative;
   top: -45px;
   z-index:99;
   text-transform: uppercase;
   font-family: arial;
   font-size: 22px;
    font-weight: bold;
    
}
img {
    position: relative;
    width: 200px;
}

a {
    text-decoration: none;
}