JSFiddle - React, Tailwind, and code Playground

HTML

<div class="entry">
    <a href="http://google.com">
   <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcS12iyyT_pG8r8V2IkiIsL7RHw-BLWjCvqQVgMzXLnLjt3KoCbf" alt="<?php the_title(); ?>" class="postimage" />
    	</a>
     </div>

CSS

div.entry {
	position: relative;
	color:#000;
	box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
	overflow:hidden;
	cursor:pointer;
}
img.postimage {
   height:220px;
   width:220px;
}
div.entry:after {
    content:'Click on image for more information';
	text-align:center;
    color:#fff;
    position:absolute;
	height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.8);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
div.entry:hover:after {
    opacity:1;
}