JSFiddle - React, Tailwind, and code Playground

by zumajoe

HTML

<ul id="homepromos">
  <li class="promos">
    <div class="promo-image"> <img width="160" height="150" src="http://www.mobygames.com/images/shots/s/118343-town-country-surf-designs-wood-water-rage-nes-screenshot-kool.jpg"> </div>
    <div class="promo-content">
      <p>This is<br>
        The<br>
        Text</p>
    </div>
    <a class="clickarea" href="#"></a> </li>
</ul>

CSS

p {
    color:white;
    font-weight:bold;
    text-transform:uppercase;
    font-family:arial;
}

#homepromos li {
    float: left;
    width: 160px;
    height: 150px;
    background: rgba(65, 65, 65, 0.9);
    margin-right: 36px;
}

li.promos {
    display: table; 
    position:relative;
    }

.promo-image {
    position:absolute; 
    top:0; 
    z-index:99;
    }

.promo-content {
    position:relative; 
    top:0; width:100%; 
    height:100%; 
    z-index:100; 
    text-align:center; 
    display: table-cell; 
    vertical-align: middle;
    }
    
a.clickarea {
    display:block; 
    z-index:102; 
    position:absolute; 
    top:0; left:0; 
    width:160px; 
    height:150px;    
    
    background: #dad; /* any color */
    filter:alpha(opacity=0); /* make it transparent in IE again */
    opacity: 0; /* make it transparent for good browsers */
}