JSFiddle - React, Tailwind, and code Playground

by B L Praveen

HTML

<h2 class="title">CSS3 Image Gallery <span>with a 3D Lightbox Effect</span></h2>
        
		<p style="width: 610px; padding: 20px 30px 0 30px; margin: 0 auto; text-align: center;">A CSS3 presentation demonstrating how to take advantage of modern browsers while still allowing the content to be easily accessible in older, less capable browsers.</p>

        <ul id="grid" class="group">
            <li>
                <div class="details">
                	<h3>Lanterns</h3>
                    <a class="more" href="#info1">view details</a> 
                </div>
               <a class="more" href="#info1"><img src="images/lanterns.jpg" /></a>
            </li>
            <li>
                <div class="details">
	                <h3>Tree</h3>
                    <a class="more" href="#info2">view details</a>
    			</div>
                <a href="#info2"><img src="images/tree.jpg" /></a>
            </li>
            <li class="end">
                <div class="details">
	                <h3>Cable Car</h3>
                    <a class="more" href="#info3">view details</a>
    			</div>
                <a href="#info3"><img src="images/cablecar.jpg" /></a>
            </li>
            <li>
                <div class="details">
	                <h3>London Eye</h3>
                    <a class="more" href="#info4">view details</a>
    			</div>
                <a href="#info4"><img src="images/londoneye.jpg" /></a>
            </li>
            <li>
                <div class="details">
	                <h3>Golden Statue</h3>
                    <a class="more" href="#info5">view details</a>
    			</div>
                <a href="#info5"><img src="images/statue.jpg" /></a>
            </li>
            <li class="end">
                 <div class="details">
	                <h3>Under the Bridge</h3>
                    <a class="more" href="#info6">view details</a>
    			</div>
                <a href="#info6"><img src="images/bridge.jpg" /></a>
           ...

CSS

/* -------------------------------------------------------------------------------------------------------------------------
A CSS3 presentation demonstrating how to take advantage of modern browsers while still allowing the content to be easily
accessible in older, less capable browsers.
Inspired by http://playground.deaxon.com/css/lightbox by http://twitter.com/deaxon 
---------------------------------------------------------------------------------------------------------------------------- */

h2.title { font-size: 68px; letter-spacing: -3px; font-weight: bold; text-align: center; margin-top: 35px; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6); }
h2.title span { font-size: 38px; line-height: 48px; display: block; letter-spacing: -2px; color: rgba(51, 51, 51, 0.5); }

/* -------------------------------------------------------------------------------------------------------------------------
Grid of images
---------------------------------------------------------------------------------------------------------------------------- */
#grid { margin: 35px 0; }
/*
Add the transition affect to the images in the grid. Any changes to the element will be transtioned from it's current state, for example on :hover */
#grid li { float: left; list-style: none; margin: 0 25px 25px 0; position: relative; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.25);
	-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
	-webkit-transition: all 0.15s ease-in;
	-moz-transition: all 0.15s ease-in;
	-ms-transition: all 0.15s ease-in;
	transition: all 0.15s ease-in;
}
#grid li.end { margin-right: 0; }
#grid li:nth-child(3n) { margin-right: 0; }
#grid li:hover { z-index: 2;
	-webkit-transform: scale(1.2) translateY(-40px);	
	-moz-transform: scale(1.2) translateY(-40px);	
	-ms-transform: scale(1.2) translateY(-40px);	
	transform: scale(1.2) translateY(-40px);	
	-webkit-box-shadow: 0 15px 35px...

JavaScript

if (!Modernizr.csstransforms) {
	$(document).ready(function(){
		$(".close").text("Back to top");
	});
}