JSFiddle - React, Tailwind, and code Playground

by Luis Manuel

HTML

<div class="grid">

  <div class="grid-item">
    <img src="https://s-media-cache-ak0.pinimg.com/236x/9b/8c/23/9b8c23be33111cc917862ad21c8e85ae.jpg" />
    <h2 class="img-title"><span>image description</span></h2>
  </div>

  <div class="grid-item">
    <img src="http://3.bp.blogspot.com/-vfzT5p9p4jA/TlTJfUKG27I/AAAAAAAABGQ/ujub-_1LGag/s640/fashion156tailoredissuem03.jpg" />
    <h2 class="img-title"><span>image description with long text and testing if it goes over the edge</span></h2>
  </div>

  <div class="grid-item">
    <img src="https://klosetkase.files.wordpress.com/2010/01/colbyjamarbycodazzi011.jpg" />
    <h2 class="img-title">image description with normal text</h2>
  </div>

  <div class="grid-item">
    <img src="https://klosetkase.files.wordpress.com/2009/12/32.jpg" />
    <h2 class="img-title">image description</h2>
  </div>

  <div class="grid-item">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/78/55/25/7855251d88a66f2f3ba8b5a7a44edaf8.jpg" />
    <h2 class="img-title">image description</h2>
  </div>

  <div class="grid-item">
    <img src="https://mensrag.files.wordpress.com/2009/09/118397_9401.jpg?w=420" />
    <h2 class="img-title">image description</h2>
  </div>

  <div class="grid-item">
    <img src="http://www.thecoolhour.com/wp-content/uploads/2013/10/RVLV_CLOTHING_MENS_PRESS_KIT_0002.jpg" />
    <h2 class="img-title">image description</h2>
  </div>

  <div class="grid-item">
    <img src="http://i874.photobucket.com/albums/ab306/districtcut2/scarfknit.png" />
    <h2 class="img-title">image description</h2>
  </div>

  <div class="grid-item">
    <img src="http://attheloft.typepad.com/.a/6a00e54ecca8b9883301630400d2ba970d-pi" />
    <h2 class="img-title">image description</h2>
  </div>

  <div class="grid-item">
    <img src="https://s-media-cache-ak0.pinimg.com/236x/d6/ee/a5/d6eea52144d63e4fc2e923d0dd6eaccb.jpg" />
    <h2 class="img-title">image description</h2>
  </div>

  <div class="grid-item">
    <img...

CSS

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body { font-family: sans-serif; }

/* ---- grid ---- */

.grid {
    background: #fff;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* clearfix */
.grid:after {
    content: '';
    display: block;
    clear: both;
}

/* ---- grid-item ---- */

.grid-item {
    /* width: 49%; */
    float: left;
    background: #ccc;
    margin: 5px;
    position: relative;
    text-align: center;
}

h2.img-title {
    display: block;
    margin-bottom: 0;
    margin-top: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.7);
    opacity: 0;
}

h2.img-title span {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%); /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
    -ms-transform: translateY(-50%); /* IE 9 */
    transform: translateY(-50%); /* IE 10, Fx 16+, Op 12.1+ */
    width: 100%;
}

.grid-item:hover h2.img-title {
    opacity: 1;
}

JavaScript

$(document).ready( function() {

  $('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: 160
  });
  
});