JSFiddle - React, Tailwind, and code Playground

by Danja Wittmann

HTML

<img src="http://media.vorotila.ru/ru/items/t1@1b328930-f6e1-4775-838f-5071f929044a/narisovannaya-sobaka.jpg"></img>
<img src="http://cs698.vk.me/g22458954/a_7a686b0c.jpg"></img>
<img src="http://sevelina.ru/files/2010/07/pinc43.gif"></img>
<img src="http://dreamworlds.ru/uploads/posts/2011-02/1298117943_post-55714-1229206741.jpg"></img>
<div class="lightbox">
<div class="lightbox_block">
</div>
    <span id="close">ЗАКРЫТЬ</span>
</div>

CSS

body {
    padding: 0px;
    margin: 0px;
}
.smallimg {
    max-width: 300px;
    max-height: 300px;
    cursor: pointer;
    border: 1px solid black;
}

.lightbox {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: none;
    position: fixed;
    top: 0px;
    text-align: center;
}
.lightbox_block {
    border: 20px solid #F7F7F7;
    background: white;
    max-width: 700px;
    max-height: 700px;
    display:inline-block;
}
#close {
    color: white;
    position: absolute;
    color: #F7F7F7;
    font-size: 20px;
    top: 0px;
}

JavaScript

$(document).ready(function(){
    $("img").addClass('smallimg');
    $('.lightbox_block').append('<img src="'+$(this).attr('src')+'"></img>');
    $("#close").click(function () {
        $('.lightbox').css("display","none");
    });
    $("img").click(function () {
        $('.lightbox').css("display","block");
    });
});