JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="images">
      <li id="onea"><a class="close" href="#gal-six">Close</a><a href="#onea">
      <img src="http://d2o0t5hpnwv4c1.cloudfront.net/871_dryEE/dry-ee.png" alt="">
			<figcaption>Caption etc goes here...</figcaption></a>
			</li>
</ul>

CSS

ul.images {
	width:60%;
	/*background:#ccc;*/
	list-style:none;
	float:left;
	/*padding:0 0 2.5% 0;*/
	margin-top:85px;
}

ul.images li {
	width:30%;
	float:left;
	margin:2.5% 0 0 2.5%;
	position:relative;
}

ul.images li img {
	max-width:100%;
	float:left;
	border:2px solid #eee;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
	
.images li {
	-moz-transition:all 1s ease;
	-webkit-transition:all 1s ease;
	-o-transition:all 1s ease;
	-ms-transition:all 1s ease;
	transition:all 1s ease;
	position:relative;
}

.images li:hover {opacity:1;}

.images li:target {
	-moz-transform:scale(2) rotateY(360deg);
	-webkit-transform:scale(2) rotateY(360deg);
	-o-transform:scale(2) rotateY(360deg);
	-ms-transform:scale(2) rotateY(360deg);
	transform:scale(2) rotateY(360deg);
	z-index:2;
	opacity:1;
}

.images li:nth-of-type(even):target {
	-moz-transform:scale(2) rotateX(360deg);
	-webkit-transform:scale(2) rotateX(360deg);
	-o-transform:scale(2) rotateX(360deg);
	-ms-transform:scale(2) rotateX(360deg);
	transform:scale(2) rotateX(360deg);
}

.images li:target img {
	-moz-box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
	box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
}

.close {
	display:none;
	font:0.3em/1em Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	letter-spacing:0.3em;
	text-decoration:none;
	background:#c15252;
	padding:2px 2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	color:#fff;
	position:absolute;
	top:-3px;
	right:0;
	-moz-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.2);
	box-shadow:2px 2px 3px rgba(0, 0, 0, 0.2);
}

.close:hover {background:#d06464;}

.images li:target .close {display:inline;}

figcaption{font-family:arial;padding-top:3px;font-size:96%;}

#wrapper{width:80%;margin:200px auto 0 auto;}

a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration:...