JSFiddle - React, Tailwind, and code Playground

by Ian Gray

HTML

<script src="http://iag.me/tools/masonary/masonary.js"></script>
<div id="articleGrid">
    <a href="#"><div class="box grid1"><h3>This is a test </h3></div></a>
    <a href="#"><div class="box grid3"><h3>This is a test </h3></div></a>
    <a href="#"><div class="box grid2"><h3>This is a test </h3></div></a>
    <a href="#"><div class="box grid3"><h3>This is a test </h3></div></a>
    <a href="#"><div class="box grid1"><h3>This is a test </h3></div></a>
    <a href="#"><div class="box grid1"><h3>This is a test </h3></div></a>
    <a href="#"><div class="box grid2"><h3>This is a test </h3></div></a>
    <a href="#"><div class="box grid2"><h3>This is a test </h3></div></a>
    <a href="#"><div class="box grid3"><h3>This is a test </h3></div></a>
    <a href="#"><div class="box grid1"><h3>This is a test </h3></div></a>
    <a href="#"><div class="box grid1"><h3>This is a test </h3></div></a>
</div>

CSS

.box {
        border:#999 1px solid; background-position:50% 50%; 
        background-repeat:no-repeat; 
        display:block; 
        -moz-background-size:cover; 
        -webkit-background-size:cover; 
        background-size:cover;
    }

#articleGrid { margin: 0 auto; background-color:#666;}

#articleGrid a:link, .box a:visited  {color:#fff; text-shadow: 2px 2px #333;}

#articleGrid h3 {margin:0px; padding:5px;position:absolute; line-height:1em;}


.grid1 {
  width: 298px;
  height: 298px;
  background:url('http://lorempixel.com/298/298/');
  float: left;
}

.grid2 {
  width: 398px;
  height: 298px;
  background:url('http://lorempixel.com/398/298/');
  float: left;
}

  
.grid3 {
  width: 698px;
  height: 298px;  
  background:url('http://lorempixel.com/698/298/');
  float: left;
}

.box {    
   -webkit-transition: all .3s ease-out; 
   -moz-transition: all .3s ease-out; 
   -o-transition: all .3s ease-out; 
   transition: all .3s ease-out;
}
.box:hover
    {
     -moz-transform: scale(1.1);
   -webkit-transform: scale(1.1);
   -o-transform: scale(1.1);
   transform: scale(1.1);
   -ms-transform: scale(1.1);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
   M11=1.1, M12=-0, M21=0, M22=1.1);
        -moz-box-shadow: 3px 3px 1px #666;
        -webkit-box-shadow: 3px 3px 1px #666;
        box-shadow: 3px 3px 1px #666;
        z-index:9000;
    }

JavaScript

$(function(){
    
    $('#articleGrid').masonry({
      itemSelector: '.box',
      columnWidth: 100,
      isFitWidth: true,
       isAnimated: !Modernizr.csstransitions,
      animationOptions: {
        duration: 750,
        easing: 'linear',
        queue: false
         }
    });
  });