JSFiddle - React, Tailwind, and code Playground

by Joshua Powell

HTML

<div class="parent">
    <img src="http://www.poweranimalsunleashed.com/images/forest-light-900.jpg" alt="img" />
    <img src="http://forestry.ky.gov/Kentuckysstateforests/PublishingImages/TygartsStateForest.jpg" alt="img" />
    <img src="http://miriadna.com/desctopwalls/images/max/Falling-asleep-forest.jpg" alt="img" />
    <img src="http://miriadna.com/desctopwalls/images/max/Fairy-forest.jpg" alt="img" />
    <img src="http://upload.wikimedia.org/wikipedia/commons/1/1e/Appalachian_Cove_forest_on_Baxter_Creek_Trail_in_Great_Smoky_Mountains_National_Park.jpg" alt="img" />
    <img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/515/cache/hoh-rain-forest-olympic-national-park_51546_990x742.jpg" alt="img" />
    <img src="http://6269-9001.zippykid.netdna-cdn.com/wp-content/uploads/2013/11/Forest-Background.jpg" alt="img" />
    <img src="http://cdn.zmescience.com/wp-content/uploads/2011/06/forest.jpg" alt="img" />
    <img src="http://static1.wikia.nocookie.net/__cb20071023174052/wowwiki/images/e/ed/TerokkarForest.jpg" alt="img" />
    <img src="http://freebigpictures.com/wp-content/uploads/2009/09/forest-path.jpg" alt="img" />
    <img src="http://scienceblogs.com/startswithabang/files/2013/05/crooked-forest-poland.jpg" alt="img" />
    <img src="http://www.photosjunction.com/contents/member/nature/photos/beautiful-forest-photo-ef757.jpg" alt="img" />
    <img src="http://edwardbyrnephotos.files.wordpress.com/2012/10/forest-trail-bridge-5.jpg" alt="img" />
    <img src="http://upload.wikimedia.org/wikipedia/commons/f/f0/Shiskin_-_The_Forest_Clearing.jpg" alt="img" data-value="Image about this cool stuff" />
    <img src="http://th06.deviantart.net/fs70/PRE/f/2012/235/e/1/forest_commission_by_gamefan84-d5c446o.jpg" alt="img" />
    <img src="http://www.wallpapersdb.org/wallpapers/nature/vercors_forest_1920x1080.jpg" alt="img" />
</div>
<div class="overlay"><img src="" alt="image" /><span class="close">X</span></div>

CSS

body {
    margin: 0;
    padding: 0;
    background: brown;
}

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

.parent {
    width: 100%;
    column-count: 3;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    -o-column-count: 3;
    -ms-column-count: 3;
    column-gap: 5px;
    -webkit-column-gap: 5px;
    -moz-column-gap: 5px;
    -o-column-gap: 5px;
    -ms-column-gap: 5px;
    position: relative;
    z-index: 10;
}

.parent img {
    width: 100%;
    position: relative;
}

.overlay {
    width: 90%;
    height: 90%;
    left: 5%;
    top: 5%;
    position: fixed;
    z-index: 100;
    display: none;
    background-size: cover;
    background-position: center center;
}

.overlay img {
    width: 100%;
}

.close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    right: -20px;
    top: -20px;
    border: 3px solid rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.6);
    text-align: center;
    line-height: 35px;
    font-size: 20px;
    color: #f7f7f7;
}

JavaScript

$('.parent img').on('click', function() {
   var imgSrc = $(this).attr('src');
    
    $('.overlay').fadeIn()
    $('.overlay img').attr('src', imgSrc);
    
    $('.close').on('click', function() {
        $('.overlay').fadeOut();
    });
});