JSFiddle - React, Tailwind, and code Playground

by B L Praveen

HTML

<div id="container">	
       	<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="http://inspectelement.com/demos/css3/3dgallery/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="http://inspectelement.com/demos/css3/3dgallery/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="http://inspectelement.com/demos/css3/3dgallery/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="http://inspectelement.com/demos/css3/3dgallery/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="http://inspectelement.com/demos/css3/3dgallery/images/statue.jpg" /></a>
            </li>
           ...

CSS

body {
    background: url("http://inspectelement.com/demos/css3/3dgallery/images/noise.jpg") repeat scroll 0 0 #DDDDDD;
    font-family: Arial,Helvetica,sans-serif;
}

body {
    color: #222222;
}
li.g, body, html, .std, h1 {
    font-family: arial,sans-serif;
    font-size: small;
}
body, #leftnav, #tbdi, #hidden_modes, #hmp {
    background: none repeat scroll 0 0 #FFFFFF;
}
body {
    color: #000000;
    margin: 0;
    overflow-y: scroll;
}
li.g, body, html, .std, h1 {
    font-family: arial,sans-serif;
    font-size: small;
}
#container {
    margin: 0 auto;
    padding: 0 20px;
    width: 920px;
}
/* -------------------------------------------------------------------------------------------------------------------------
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,...

JavaScript

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