JSFiddle - React, Tailwind, and code Playground

by devy indriyani

HTML

<div class="click">
<a href="http://2.bp.blogspot.com/-54KHppqdwzs/UPTTGJom_wI/AAAAAAAABRk/8BPfpVGOElc/s1600/the-big-lebowski-1.jpeg"><img src="http://2.bp.blogspot.com/-54KHppqdwzs/UPTTGJom_wI/AAAAAAAABRk/8BPfpVGOElc/s1600/the-big-lebowski-1.jpeg" alt="Sample"/></a>
</div>
<div class="centerstage">
<span class="centerstage-close"></span>
</div>

CSS

body {
    margin: 45px auto;
}
.click img {
  display: block;
  width: 300px;
  margin: 1em auto;
  border: 10px solid white;
  border-radius: 5px;
  box-shadow: 0 0 0 1px #ccc;
  -webkit-transition: all .15s ease-in-out;
  transition: all .15s ease-in-out;
}

.click a:hover img {
  box-shadow: 0 0 0 1px #999, 0 6px 3px #ccc;
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
}

.centerstage {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.95);
}

.centerstage.state--active {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

JavaScript

// Fullscreen Image Click Sistem
// Input Code='JavaScript'
// Course: http://sahabatblogger77.blogspot.com
// Author - Devy Indriyani
function openstage($elem,$stage){
  $elem.each(function(){
    var $this = $(this);
    $this.click(function(event){
      event.preventDefault();
      $stage.addClass('state--active');
      $('body').addClass('centerstage--active');
    });
  });}

function closestage($elem,$stage){
   $elem.click(function(){
    $stage.removeClass('state--active');
    $('body').removeClass('centerstage--active');});}
function centerstage($elem){
  var stageprops = {
    stage : $('.centerstage'),
    closebtn: $('.centerstage-close')} 
  fillstage($elem,stageprops.stage);
  closestage(stageprops.closebtn,stageprops.stage);
  openstage($elem,stageprops.stage);}
centerstage($('a:has(img)'));