JSFiddle - React, Tailwind, and code Playground

by lustre

HTML

<script src="https://raw.github.com/nbartlomiej/foggy/foggy-1.1.1/jquery.foggy.min.js"></script>
<span class="click one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu enim et eros posuere consequat id in libero. Aliquam pellentesque pulvinar aliquet. Curabitur sollicitudin sagittis consequat. In lobortis semper lacus et aliquet. Morbi luctus, tellus et imperdiet iaculis, ante eros sodales leo, in rutrum odio nunc at mi. Donec ac risus eu lorem vehicula sodales lacinia tempor ipsum. Curabitur sit amet quam leo. Donec faucibus posuere libero, a tincidunt elit auctor vitae. Vestibulum sed dui at erat lobortis sagittis a nec purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ultrices lacus ante.</span>
<div class="hidden"><div class="close"></div><img src="http://avatarmaker.net/free-avatars/avatars/animated_214/yellow_smile_blabla_animated_avatar_100x100_62415.gif" />Babble lotty bahfjd hfjsuf lf hwuf uwfy hfifhhuff huaof nhufo hufo hu oh uohuaof uh u ohyagdt2ig dhqub gqtfi bquf qnof gtqvbi nqf hqufbo qgfn of bygfn yfu</div>

<span class="click one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu enim et eros posuere consequat id in libero. Aliquam pellentesque pulvinar aliquet. Curabitur sollicitudin sagittis consequat. In lobortis semper lacus et aliquet. Morbi luctus, tellus et imperdiet iaculis, ante eros sodales leo, in rutrum odio nunc at mi. Donec ac risus eu lorem vehicula sodales lacinia tempor ipsum. Curabitur sit amet quam leo. Donec faucibus posuere libero, a tincidunt elit auctor vitae. Vestibulum sed dui at erat lobortis sagittis a nec purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ultrices lacus ante.</span>
<div class="hidden"><div class="close"></div>Lorem ipsum lalaldkaldh jfhqu hnu yh igyf moqhfumhf uqf mphqufp maa</div>

<span class="click one">Lorem ipsum dolor sit amet, consectetur...

CSS

body {
    margin:0;
    padding:0;
}


.click{
    color:#fff;    
    z-index:2;
	display:block;
	float:left;
    width:33%;
    padding:0;
	height:250px;
}

.click.last {
    width:34%;
}

.click.one{
	background:url('http://thumbs.media.smithsonianmag.com//filer/6d/20/6d207ae8-0c3c-455a-8ff2-8d3a7cf37ce0/smithsonian-photo-contest-winner-2012-crop.jpg__800x600_q85_crop.jpg');
	background-size: 520px 270px;
}

.click.two{
	background:url('http://farm8.staticflickr.com/7304/11949811256_99cd5cbd55_b.jpg');
	background-size: 520px 270px;
}

.click:hover {  
    cursor:pointer;
}

.hidden,
.show {
    background:#fff;
    position:absolute;
    left:50%;
    top:50%;
    color:#444;
	transition: 1s;
}

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

.show {   
    opacity:1;
    width:1000px;
    height:600px;
    padding:20px;
    margin:-300px 0 0 -500px;
    font-size:1em;
    transform:scale(1);
}


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

JavaScript

$(function(){

var box = $('.box');
    
    $(".click").click(function(){

        $(this).next(".hidden").addClass("show");

        $(".click").foggy({
			blurRadius: 4,          // In pixels.
			opacity: 0.3,           // Falls back to a filter for IE.
			cssFilterSupport: true  // Use "-webkit-filter" where available.
		});
    }); 
    
    $(".close").click(function(){
        $(".hidden").removeClass("show");
		$('.click').foggy(false);
    }); 
});

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

    if (!container.is(i.target) && container.has(i.target).length === 0) {
        container.removeClass("show");
		$('.click').foggy(false);
    }
});