JSFiddle - React, Tailwind, and code Playground

by Justin

HTML

<div class="gallery">
    <div class="gallerypreview">
        <img id="cooking" src="http://fillmurray.com/150/150" class="left" />
        <span class="date">11/22/33</span>
        <span class="location">Los Angeles, CA</span>
    </div>
    <div class="gallerypreview">
        <img id="cooking" src="http://fillmurray.com/150/150" class="center" />    
    </div>
    <div class="gallerypreview">
        <img id="cooking" src="http://fillmurray.com/150/150" class="right" />
    </div>
</div>

CSS

.gallery > div {width: 32%; display: inline-block; border: 1px solid #ECECEC; vertical-align: top; z-index: 1;}
  .gallery > div > img {display: block; margin: auto}
  .gallery > div > p {padding: 5px;}
  .date {font-style: italic; text-align: center; width: 100%; font-size: .6em; display: block;}
  .location {font-weight: 600; text-align: center; width: 100%; font-size: .6em; display: block;}

JavaScript

var open = false;
$('img').click(function() {
    if(open == false) {
        galleryID = $(this).attr('id');
        alert(galleryID);
        $('.gallerypreview').css('opacity', 0.25);
        of = $(this).parent().offset();
        OuterDiv = $('<div><span class="close">x</span></div>').css({'opacity': '1',position:'absolute', top: of.top, left: of.left, 'background-color': 'red'}).appendTo('.gallery');
OuterDiv.animate({ width:'100%',height:500, left: 0});
        open = true;
    }
    $('.close').click(function(){
         $(this).parent().remove(); 
        $('.gallerypreview').css('opacity', 1);
        open = false;
    })
})