JSFiddle - React, Tailwind, and code Playground

by LW

HTML

<div class="grid">

	<div class="grid-item">
		<div class="g-inner" style="background-image:url(https://placekitten.com/350/350);">
			<div class="g-item"><img src="/some-png-img.png" height="175" width="175" /></div>
			<div class="g-more">Bla bla bla.</div>
			<div class="g-close">x</div>
		</div>	
	</div>

	<div class="grid-item grid-item-wide">
		<div class="g-inner" style="background-image:url(https://placekitten.com/350/350);">
			<div class="g-item"><img src="/some-png-img.png" height="175" width="175" /></div>
			<div class="g-more">Bla bla bla.</div>
			<div class="g-close">x</div>
		</div>
	</div>

	<div class="grid-item">
		<div class="g-inner" style="background-image:url(https://placekitten.com/350/350);">
			<div class="g-item"><img src="/some-png-img.png" height="175" width="175" /></div>
			<div class="g-more">Bla bla.</div>
			<div class="g-close">x</div>
		</div>
	</div>

	<div class="grid-item open-left">
		<div class="g-inner" style="background-image:url(https://placekitten.com/350/350);">
			<div class="g-item"><img src="/some-png-img.png" height="175" width="175" /></div>
			<div class="g-more">Bla bla</div>
			<div class="g-close">x</div>
		</div>
	</div>

	<div class="grid-item open-top">
		<div class="g-inner" style="background-image:url(https://placekitten.com/350/350);">
			<div class="g-item"><img src="/some-png-img.png" height="175" width="175" /></div>
			<div class="g-more">Bla bla</div>
			<div class="g-close">x</div>
		</div>
	</div>

	<div class="grid-item open top">
		<div class="g-inner" style="background-image:url(https://placekitten.com/350/350);">
			<div class="g-item"><img src="/some-png-img.png" height="175" width="175" /></div>
			<div class="g-more">Bla bla</div>
			<div class="g-close">x</div>
		</div>
	</div>

	<div class="grid-item open-top">
		<div class="g-inner" style="background-image:url(https://placekitten.com/350/350);">
			<div class="g-item"><img src="/some-png-img.png" height="175" width="175"...

CSS

/* --- */
.grid{width:875px; margin:20px auto;}
.grid:after {content:''; display:block; clear:both;}
.grid-item{width:175px; height:175px;}
/* .z1{z-index:10;}
.z2{z-index:20;} */
	
.g-more{display:none; position:absolute; top:175px; height:175px; width:175px; transition:all 1s ease-in-out; opacity:0; padding:20px;}
.active .g-more{opacity:1; display:block;}
	
.grid-item{position:relative; float:left; width:175px; height:175px; background:#ddd; color:#fff; z-index: 1;transition:z-index 1s linear;}
.grid-item.active {z-index:20;transition:z-index .01s linear;}
.grid-item:before{display:block; padding:0;}
.grid-item-wide, .grid-item-wide .g-inner, .grid-item-wide .g-item{width:350px; height:175px;}

.g-inner{cursor:pointer; overflow:hidden; width:175px; height:175px;  -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; background-repeat:no-repeat; background-position:left 50%;transition:all 1s ease-in-out;}
.active .g-inner{width:350px; height:350px; position:relative; cursor:default;}
.open-left.active .g-inner{margin-left:-175px;}
.open-top.active .g-inner{margin-top:-175px;}

.g-item{width:175px; height:175px; position:relative;}
	
.g-close{cursor:pointer; position:absolute; right:-50px; bottom:-50px; width:50px; height:50px; line-height:50px; font-size:35px; display:none; opacity:0; text-align:center; }
.active .g-close{opacity:1; right:0; top:auto; bottom:0; display:block;}



* {box-sizing: border-box;}
html,body{padding:0; margin:0; background:#333;}
body{font-family:sans-serif; line-height:24px; font-size:15px; color:#eee;}		
header, section, footer, aside, nav, main, article, figure {display:block;}
	
h1,h2,h3,h4,h5{margin:0;}
.clear{clear:both; height:0; overflow:hidden;}

img{height:auto; max-width:100%; vertical-align:middle;}
p{margin-top:0; padding-top:0;}

.bg{-webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; background-repeat:no-repeat;...

JavaScript

// home grid animatie
	$(".grid-item").on("click", function(){
		$(".grid-item").removeClass("active");
		$(this).addClass("active");
	});
	$(".g-close").on("click", function(e){
		e.stopPropagation();
		$(this).closest(".grid-item").removeClass("active");
	});