JSFiddle - React, Tailwind, and code Playground

by lustre

HTML

<div class="column">
    <div class="click">
		<div class="wrapper">
                <figure class="effect-apollo">
                    <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" alt="img18"/>
                    <figcaption>
                        <h2>Strong <span>Apollo</span></h2>
                        <p>Apollo's last game of pool was so strange.</p>
                    </figcaption>			
                </figure>
		</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">
                <figure class="effect-apollo">
                    <img src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg" />
                    <figcaption>
                        <h2>Strong <span>Apollo</span></h2>
                        <p>Apollo's last game of pool was so strange.</p>
                        <a href="#">View more</a>
                    </figcaption>			
                </figure>		
		</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...

CSS

/* Common style */
figure {
	position: relative;
	float: left;
	overflow: hidden;
	height: auto;
	text-align: center;
	cursor: pointer;
}

figure img {
	position: relative;
	display: block;
	opacity: 0.8;
}

figure figcaption {
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
    line-height:1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
    position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

figure figcaption::before,
figure figcaption::after {
	pointer-events: none;
}



figure h2 {
	word-spacing: -0.15em;
	font-weight: 300;
}

figure h2 span {
	font-weight: 800;
}

figure h2,
figure p {
	margin: 0;
}

figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}

figure.effect-apollo {
	/*background: #39d;*/
}

figure.effect-apollo img {
	opacity: 0.95;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(1.05,1.05,1);
	transform: scale3d(1.05,1.05,1);
}

figure.effect-apollo figcaption::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.5);
	content: '';
	-webkit-transition: -webkit-transform 0.6s;
	transition: transform 0.6s;
	-webkit-transform: scale3d(2.5,2,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
	transform: scale3d(2.5,2,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
}

figure.effect-apollo p {
  position: absolute;
  /* right: 0; */
  /* bottom: 0; */
  margin: 20px;
  padding-top: 10px;
  /* max-width: 150px; */
  width: 90%;
  border-top: 4px solid #fff;
  text-align: center;
  opacity: 0;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}

figure.effect-apollo h2 {
	text-align: center;
    padding-top:20px;
}

figure.effect-apollo:hover img {
	opacity: 0.6;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
    -webkit-filter: brightness(0.5) saturate(0) contrast(1.5);
}

figure.effect-apollo:hover figcaption::before...

JavaScript

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

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

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