JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<div id="wrap">
        <div id="lightbox"></div>
        <a href="#"><img src="http://behance.vo.llnwd.net/profiles3/127095/projects/322096/01270951254961628.jpg"></a>
    </div>

CSS

#wrap{
margin:0 auto;
}
#wrap img{
display:block;
margin:200px auto 0 auto;
/*border-radius*/
-webkit-border-radius:5px;
   -moz-border-radius:5px;
        border-radius:5px;
/*box-shadow*/
-webkit-box-shadow:0px 0px 5px #444;
   -moz-box-shadow:0px 0px 5px #444;
        box-shadow:0px 0px 5px #444;
background:white;
padding:10px;
}
#lightbox{
display:none;
height:290px;
width:580px;
background:url('http://behance.vo.llnwd.net/profiles3/127095/projects/322096/1270951254961814.jpg')no-repeat;
margin:150px auto;
/*border-radius*/
-webkit-border-radius:5px;
   -moz-border-radius:5px;
        border-radius:5px;
/*box-shadow*/
-webkit-box-shadow:0px 0px 5px #444;
   -moz-box-shadow:0px 0px 5px #444;
        box-shadow:0px 0px 5px #444;
z-index:1;
padding:10px;
}
#lightbox:before{
font:18px georgia, sans-serif;
color:white;
content:"click image for close";
opacity:.8;
}

JavaScript

$('a').click(function() {
    $(this).hide();
    $('#lightbox').fadeIn();
});

$('#lightbox').click(function() {
    $(this).hide();
    $('a').show();

});