JSFiddle - React, Tailwind, and code Playground

by Osoascam

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js"></script>
<ul id="sections">
                            <li class="item">
                                <img src="http://thumbs.dreamstime.com/x/isolated-beagle-dog-37703869.jpg"/>
                                <div class="else">Lorem ipsum dolor sit amet</div>
                            </li>
                            <li class="item">
                                <img src="http://thumbs.dreamstime.com/x/isolated-beagle-dog-37703869.jpg"/>
                                <div class="else">Lorem ipsum dolor sit amet</div>
                            </li>
                            <li class="item">
                               <img src="http://thumbs.dreamstime.com/x/isolated-beagle-dog-37703869.jpg"/>
                                <div class="else">Lorem ipsum dolor sit amet</div>
                            </li>
                             <li class="item">
                               <img src="http://thumbs.dreamstime.com/x/isolated-beagle-dog-37703869.jpg"/>
                                <div class="else">Lorem ipsum dolor sit amet</div>
                            </li>
                             <li class="item">
                                <img src="http://thumbs.dreamstime.com/x/isolated-beagle-dog-37703869.jpg"/>
                                <div class="else">Lorem ipsum dolor sit amet</div>
                            </li>
                            <li class="item">
                                <img src="http://thumbs.dreamstime.com/x/isolated-beagle-dog-37703869.jpg"/>
                                <div class="else">Lorem ipsum dolor sit amet</div>
                            </li>
                            <li class="item">
                                <img src="http://thumbs.dreamstime.com/x/isolated-beagle-dog-37703869.jpg"/>
                                <div class="else">Lorem ipsum dolor sit amet</div>
                 ...

CSS

#sections li {
    list-style: none;
    float: left;
    width: 20%;
  
    border: 1px solid #557799;
    background: #AACCFF;
    font-family: "Segoe UI Light", "Helvetica Neue", Helvetica, Arial;
    position: relative;
    margin: 0.1em;
    overflow: hidden;
}

li img {
    width: 100%;
    height: 100%;
}

.else {
    background: rgba(0,0,0,0.3);
    padding: 0.5em;
    position: absolute;
    bottom: 0;
    color: #FFF;
    text-shadow: 1px 1px 1px #000;
}

.item:hover img {
  height: 150%;
  width: 150%;
 
  -webkit-transition: width 1s ease, height 1s ease;
     -moz-transition: width 1s ease, height 1s ease;
       -o-transition: width 1s ease, height 1s ease;
      -ms-transition: width 1s ease, height 1s ease;
          transition: width 1s ease, height 1s ease;
}

#sections .item:hover div {
    bottom: 33%;
    transition: position 0;
}

JavaScript

$(function() {
    var container = $('#sections');
    container.masonry({
      columnWidth: 10,
      itemSelector: '.item'
    });
})