JSFiddle - React, Tailwind, and code Playground

by abdallha dagga

HTML

<div id="page-wrap">
	<div id="lightbox">
		<div id="img1">
				<img src="http://im59.gulfup.com/eeLzGB.jpg" width="920" alt="" />
				<a class="close" href="#"></a>
		</div>
		<div id="img2">
				<img src="http://1.bp.blogspot.com/-YLmTeySahw8/U4Y9loiegDI/AAAAAAAAB1I/KfC2YnG4WhI/s1600/logo-%2528%25D8%25A7%25D8%25AE%25D8%25B1-%25D8%25AA%25D8%25B9%25D8%25AF%25D9%258A%25D9%2584%2529.png" width="520" alt="" />
				<a class="close" href="#"></a>
		</div>
		<div id="img3">
				<img src="http://im59.gulfup.com/aiOkEy.jpg" width="920" alt="" />
				<a class="close" href="#"></a>
		</div>
	</div>
	<ul id="gallery">
		<li>
			<a class="clearfix" href="#img1">
				<img src="images/beatles.gif" alt="The Beatles" width="200" />
				<span>The Beatles</span>
			</a>
		</li>
		<li>
			<a class="clearfix" href="#img2">
				<img src="images/brand-new.jpg" alt="Brand New" width="200" />
				<span>Brand New</span>
			</a>
		</li>
		<li>
			<a class="clearfix" href="#img3">
				<img src="images/the-killers.jpg" alt="The Killers" width="200" />
				<span>The Killers</span>
			</a>
		</li>
	</ul>
</div>

CSS

#page-wrap {
	margin: 0 auto;
	position: relative;
	width: 980px;
}
#gallery {
	display: table;
	margin: 0 auto;
}
#gallery li {
	float: left;
	margin: 10px 20px 0 0;
	position: relative;
}
#gallery span {
	background: rgba(0, 0, 0, 0.7);
	opacity: 0;
	padding: 10% 0;
	width: 100%;
	text-align: center;
	position: absolute;
	left: 0;
	bottom: 0;
	-moz-transition: opacity 0.6s ease-in;
	-o-transition: opacity 0.6s ease-in;
	-webkit-transition: opacity 0.6s ease-in;
}
#gallery li:hover span {
	opacity: 1;
}
#gallery a {
	border: 5px solid rgba(0, 0, 0, 0.1);
	display: block;
	position: relative;
	-moz-transition: border 0.6s ease-out;
	-o-transition: border 0.6s ease-out;
	-webkit-transition: border 0.6s ease-out;
}
#gallery a:hover {
	border: 5px solid rgba(39, 25, 0, 1);
	border: 5px solid rgba(0, 0, 0, 0.5);
}
#gallery a:focus {
	-moz-transform: rotate(-2deg);
	-o-transform: rotate(-2deg);
	-webkit-transform: rotate(-2deg);
}
#gallery img {
	float: left;
}
#lightbox div {
	background: #fff;
	border: 30px solid #fff;
	opacity: 0;
	position: absolute;
	left: 0;
	top: 6%;
	z-index: 0;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: 0 0 300px rgba(0, 0, 0, 1);
	-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
}
#lightbox div:target {
	opacity: 1;
	z-index:10
}
#lightbox img {
	float: left;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
#lightbox #img2 {
	left: 15%;
}
#lightbox a {
	background: url(../images/close.png) no-repeat left top;
	height: 28px;
	width: 30px;
	position: absolute;
	top: -42px;
	right: -42px;
}