JSFiddle - React, Tailwind, and code Playground

by lvekua

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">image description</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">image description with long text and testing if it goes over the edge</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;
  height: 100%;
  margin-bottom: 0;
  margin-top: 0;
  position: absolute;
  top: 0;
  width: 100%;
  background: rgba(255,255,255,0.7);
  opacity: 0;
}

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

JavaScript

$(document).ready( function() {

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