JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<img id="my-image" src="http://webdesignandsuch.com/wp-content/uploads/featured-slider-200x200.jpg" alt=""/>


<div class="overlay"></div>

CSS

img#my-image {
    width:200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin: -100px 0 0 -100px;
    -webkit-transition:linear 1s;
    -moz-transition:linear 1s;
    transition:linear 1s;
    z-index:999;
}

.overlay {
    background:rgba(0,0,0,0.5);
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:900;
    display:none;
}

JavaScript

$(function(){ 
    $('#my-image').on('click', function(){
        $(this).css({
            'margin':"-225px 0 0 -225px",
            'width' : "450px",
            'height' : "450px",
            'transition' : "linear .8s"
        });
    });
});

$('document').ready(function(){    
    
    $('#my-image').click(function(){
        $('.overlay').fadeIn(800);
    });
    
    $('.overlay').click(function(){
        $(this).fadeOut(1000);
        $('img').css({
            'transition' : "linear .8s",
            'width' : "200px",
            'height' : "200px",
            'margin' : "-100px 0 0 -100px"
        });
    });
});