Chris Coyer Gallery

by Gautam

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<section id="pictures" >
    <div class="container" >
        <div class="row">
            <div class="col-md-offset-4 col-md-4 col-md-offset-4 text-center">
                <h1>Gallery</h1>
            </div>
        </div>
        <div class="row givespc">
            <div class="col-md-2">
                <a  href="http://s11.postimg.org/41t0066kj/preschool.jpg" class="fancybox" data-fancybox-group="gallery"><img class="img-thumbnail"  src='http://s11.postimg.org/41t0066kj/preschool.jpg'></a>
            </div>
            <div class="col-md-2">
                <a  href="http://s11.postimg.org/41t0066kj/preschool.jpg" class="fancybox" data-fancybox-group="gallery"><img class="img-thumbnail"  src='http://s11.postimg.org/41t0066kj/preschool.jpg'></a>
            </div>
            <div class="col-md-2">
                <a  href="http://s11.postimg.org/41t0066kj/preschool.jpg" class="fancybox" data-fancybox-group="gallery"><img class="img-thumbnail" src='http://s11.postimg.org/41t0066kj/preschool.jpg'></a>  <!-- change this to img/002.JPG -->
            </div>
            <div class="col-md-2">
                <a  href="http://s11.postimg.org/41t0066kj/preschool.jpg" class="fancybox" data-fancybox-group="gallery"><img class="img-thumbnail" src='http://s11.postimg.org/41t0066kj/preschool.jpg'></a>  <!-- change this to img/002.JPG -->
            </div>
            <div class="col-md-2">
                <a  href="http://s11.postimg.org/41t0066kj/preschool.jpg" class="fancybox" data-fancybox-group="gallery"><img class="img-thumbnail" src='http://s11.postimg.org/41t0066kj/preschool.jpg'></a>  <!-- change this to img/002.JPG -->
            </div>
            <div class="col-md-2">
                <a ...

CSS

#pictures img { -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; display: block; background: #fff; 
	padding: 10px; margin:5px; -moz-box-shadow: #ccc 5px 5px 20px; -webkit-box-shadow: #ccc 5px 5px 20px; margin-bottom:1em; }
#pictures img:hover { -moz-box-shadow: #666 5px 5px 20px; -webkit-box-shadow: #666 5px 5px 20px; }