JSFiddle - React, Tailwind, and code Playground

by Satinder singh

HTML

<div class="boxgrid captionfull">  
   <img src="http://www.famousbloggers.net/wp-content/themes/thesis_185/lib/scripts/thumb.php?src=/http://www.famousbloggers.net/wp-content/uploads/2010/07/stunning_images.jpg&w=150&h=150&zc=1" >
    <div class="cover boxcaption" >
         Title of Image
    </div>
</div>

<div class="boxgrid captionfull">  
   <img src="http://i-cdn.phonearena.com/images/article/31299-thumb/Cool-images-taken-with-your-cell-phone-42.jpg" >
    <div class="cover boxcaption" >
         <span>Title of Image Title of Image sdsd sdsd  sd sd s  sdsd </span>
    </div>
</div>

<div class="boxgrid captionfull">  
   <img src="http://www.vietnamholidays.pro/wp-content/uploads/2011/04/images7-150x150.jpg" >
    <div class="cover boxcaption" >
         <span>Title of Image</span>
    </div>
</div>

CSS

.boxgrid{
    width: 150px;
    height: 150px;
    margin-left:10px;
    float:left;
    background:#161613;
    border: solid 0px #8399AF;
    overflow: hidden;
    position: relative;
}
.boxgrid img{
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}
.boxcaption{
    float: left;
    position: absolute;
    background: #000;
    
    width: 100%;
    opacity: .6;
    padding-top:3px;
    padding-bottom:5px;
    text-align:center;
    /* For IE 5-7 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
    /* For IE 8 */
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
     }
      .captionfull .boxcaption {
     bottom: 0;
     left: 0;
    color:white;
 }
 .caption .boxcaption {
     top:0px;
     bottom: 0;
     left: 0;
    
 }