JSFiddle - React, Tailwind, and code Playground

HTML

<div class="column">
    <div class="click">
		<div class="wrapper">
			<img src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg" />
		</div>
		<div class="hidden">
			<div class="close"></div>
				<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="thumb" />
					Lorem ipsum dolor sit amet, et oblique voluptua necessitatibus eam. Vel ut semper ocurreret, eum epicurei laboramus delicatissimi in, vis eu hinc purto honestatis. Quod congue inciderint ius eu, ei vel reque tempor. Porro dicam tractatos sea id, id vix paulo fuisset dissentias. Eos ne laudem alienum sensibus, solum pericula prodesset qui ne. Duo et euismod delicata vituperatoribus, at facer melius pro, esse quidam possim ea est.
		</div>
	</div>
    
    <div class="click">
		<div class="wrapper">
			<img src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg" />
		</div>
		<div class="hidden">
			<div class="close"></div>
				<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="thumb" />
					Lorem ipsum dolor sit amet, et oblique voluptua necessitatibus eam. Vel ut semper ocurreret, eum epicurei laboramus delicatissimi in, vis eu hinc purto honestatis. Quod congue inciderint ius eu, ei vel reque tempor. Porro dicam tractatos sea id, id vix paulo fuisset dissentias. Eos ne laudem alienum sensibus, solum pericula prodesset qui ne. Duo et euismod delicata vituperatoribus, at facer melius pro, esse quidam possim ea est.
		</div>
	</div>
</div>

Additional crappy text to create a y-scrollbar<br />Additional crappy text to create a y-scrollbar<br />Additional crappy text to create a y-scrollbar<br />Additional crappy text to create a y-scrollbar<br />Additional crappy text to create a y-scrollbar<br />Additional crappy text to create a y-scrollbar<br />Additional crappy text to create a y-scrollbar<br />Additional crappy text to create a...

CSS

@font-face {
    font-family: 'champagne';
    src: url('../fonts/champagne.eot');
    src: url('../fonts/champagne.eot?#iefix') format('embedded-opentype'),
         url('../fonts/champagne.woff2') format('woff2'),
         url('../fonts/champagne.woff') format('woff'),
         url('../fonts/champagne.ttf') format('truetype'),
         url('../fonts/champagne.svg#champagne') format('svg');
    font-weight: normal;
    font-style: normal;

}

.click {
    float:left;
    width:50%;
}

.wrapper img {
    width:100%;
}

* {
  
    margin:0;
    padding:0;
}

body {
    margin:0;
    padding:0;
	background: #e6e6e6;
	font: 1em 'champagne',sans-serif;
}

/*div#nav {
	height: 50px;
	width: 100%;
	position: fixed;
	top:0;
	font-size: 1.4em;
	padding-right:50px;
	background: rgba(230,230,230,0.9);
	transition: 0.2s;
}*/

div#nav:hover {
	background: rgba(230,230,230,1);
	transition: 0.2s;
}

#nav a, 
#nav a:active, 
#nav a:visited {
	color: #54b7ce;
	text-decoration: none;
	float:right;
	margin-right:20px;
	line-height:50px;
}

.click{
	transition:0.5s;
}

.click:hover {  
    cursor:pointer;
}

.hidden,
.show {
    background:#fff;
    position:absolute;
    left:50%;
    top:50%;
    color:#444;
	z-index:10;
	transition: 0.5s;
}

.hidden{
    opacity:0;
    width:0;
    height:0;
    padding:0;
    margin:0;
    font-size:0;
    transform: scale(0);
}

.column div .show,
#nav div .show {   
	opacity: 1;
	width: 100%;
	height: 100%;
	padding: 20px;
	/*margin: -300px 0 0 -500px;*/
	font-size: 1em;
	transform: scale(1);
	cursor: default;
	line-height: 1.5em;
	position:fixed;
	top:0;
	left:0;
}

.column img.thumb,
#nav img.thumb {
	float: left;
	padding-right: 10px;
	width: 50%;
}


.close {
    width:10px;
    height:10px;
    display:block;    
    background-color:#00ff00;
}

.blurry {
	-webkit-filter: brightness(1.5) saturate(0);
	opacity: 0.2;
	transition: 0.5s;
}

::-webkit-scrollbar {
    width: 14px;
    height: 18px;
}
::-webkit-scrollbar-thumb {
    height:...

JavaScript

$(function(){
	
    $(".wrapper").click(function(){
        $(this).next(".hidden").addClass("show");
		$(".wrapper").addClass("blurry");
        
        var width = $('body').width();
		$("body").css("overflow","hidden");
        var scrollWidth = $('body').width() - width;
        $('body').css('margin-right', scrollWidth + 'px');
    }); 
    
    $(".close").click(function(){
        $(".hidden").removeClass("show");
		$(".wrapper").removeClass("blurry");
		$("body").css("overflow","auto");
        $('body').css('margin-right', '0px');
    }); 
});

$(document).mouseup(function (i){
    var container = $(".hidden");

    if (!container.is(i.target) && container.has(i.target).length === 0) {
        container.removeClass("show");
		$(".wrapper").removeClass("blurry");
    }
});