JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<div class="gym_galery"></div>
<a href="#" rel="http://24.media.tumblr.com/tumblr_llvdpfrnm51qcu4t1o1_400.png" class="init">
    <img src="http://24.media.tumblr.com/tumblr_llvdpfrnm51qcu4t1o1_400.png" class="thumb">
</a>

<div class="img_holder"></div>

CSS

* {
     padding:0;
     margin:0;
     outline:none;
 }
 body {
     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:200px;
     height:150px;
     float:left;
     display:none;
     border:3px solid yellow;
     padding:10px;
     background:#fff;
 }
 .img_holder {
     position:absolute;
     left:50%;
     top:35%;
     background:#f4f4f4;
     border:2px solid #eee;
 }

.img_holder img {
opacity:0.2; 
}

JavaScript

var imgAligner = $('.img_holder');
var fImg = imgAligner.html('<img src="' + rImg + '"/>');

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

function HeightWidth (element){  
var natH = $(element).height();
var natW = $(element).width();
alert(natH + " and " + natW);
}