JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<div class="gym_galery"></div>
<a href="#" rel="http://papermashup.com/wp-content/uploads/2009/07/gallery.png" class="init">
    <img src="http://papermashup.com/wp-content/uploads/2009/07/gallery.png" class="thumb">
</a>
    
 <a href="#" rel="http://www.st-hughs.ox.ac.uk/__data/assets/image/0014/5153/Gym---Main-Room.jpg" class="init">
    <img src="http://www.st-hughs.ox.ac.uk/__data/assets/image/0014/5153/Gym---Main-Room.jpg" class="thumb">
</a>   
    

<div class="img_holder">
    <p class="fixer"></p>
    <div class=hideme>CLOSEME</div>
</div>
<div class="preload"></div>

CSS

* {
     padding:0;
     margin:0;
     outline:none;
 }
 body {
     height:1000px;
     font-family:'Cuprum', sans-serif;
     font-size:62.5%;
     min-width:1000px;
     background:url('http://s20.postimg.org/rwmk0s51l/image.png');
 }
 a {
     text-decoration:none;
 }
 .thumb {
     height:100px;
     float:left;
     border:3px solid yellow;
     background:#fff;
 }
 .img_holder {
     position:absolute;
     left:50%;
     display:inline-block;
     top:35%;
     background:#f4f4f4;
     border:2px solid #eee;
 }
 .img_holder img {
     z-index:300;
 }
 .preload {
     position:absolute;
     opacity: 0;
     top:-100%;
 }
 .hideme {
     position:absolute;
     zindex:1000;
     cursor:pointer;
     top:0;
     right:0;
     color:#fff;
     padding:5px;
     background:#333;
 }
 .fixer {
     position:relative;
 }

JavaScript

var imgAligner = $('.img_holder');
var imgAlignerP = $('.img_holder p');
var imgPreload = $('.preload');

$('a.init').on('click', function () {
    var rImg = $(this).attr('rel');
    imgPreload.html('<img src="' + rImg + '"/>');
    var fImg = $('img', imgPreload);
    HeightWidth(fImg, rImg);
});

function HeightWidth(element, element2) {
    var natH = $(element).height();
    var natW = $(element).width();
    var HaW = natW / 2;
    imgAligner.animate({
        marginLeft: -HaW
    }).animate({ width : natW }).show();
    imgAlignerP.html('<img src="' + element2 + '"/>').delay(300);
}

$('div.hideme').on('click', function () {
    imgAligner.slideUp(function () {
        imgAlignerP.empty();
    });
});