How to create an Image Gallery with CSS3, without using any JavaScript or jQuery?

Image gallery is really necessary to create your interactive portfolio website or product base website and if you create it something different from other websites then visitor will spend more time on your website. If you search for a image gallery then you will find out 100 gallery samples on Google, but can you imagine that 99 gallery will be developed with JavaScript or jQuery.

Today you will learn how to create an interactive image gallery with CSS3, without using any JavaScript or jQuery.

STYLE:

<style type="text/css">

  .swapimg {float: left; position: relative; display:block;}

  .swapimg img {z-index:1;}

  .swapimg a.img-info img {

  width:142px; height:97px;

  -moz-transition: all 1s;

  -ms-transition: all 1s;

  -o-transition: all 1s;

  -webkit-transition: all 1s;

  transition: all 1s;

  }

  .swapimg a.img-info:hover img {

  width:285px; height:194px;

  -moz-transition: all 1s;

  -ms-transition: all 1s;

  -o-transition: all 1s;

  -webkit-transition: all 1s;

  transition: all 1s;

  }


.swapimg a.img-info span.magnify { background:url(magnify.png) 
no-repeat 0 0;}

.swapimg a.img-info:hover span.magnify {background:url(magnify.png) 
no-repeat 0 0; width:31px; height:32px; position:absolute; 
right:10px; bottom:10px; display:block;}

.swapimg a.img-info:hover .enlarge-img span.magnify 
{background:url(magnify.png) no-repeat 0 0; 
display:block;}


</style>

HTML:

<a name="#row1"></a>

  <div class="swapimg-row">

  <div class="swapimg">

  <a class="img-info" href="#row1">

  <span class="enlarge-img" id="image1">

  <img alt="" src="pigeon.jpg">

  <span class="magnify"></span> /*For magnify glass*/

  </span>

  </a>

  </div>


<div class="swapimg">

  <a class="img-info" href="#row1">

  <span class="default-img" id="image2">

  <img alt="" src="squirrel.jpg">

  <span class="magnify"></span>

  </span>

  </a>

  </div>


<div class="swapimg">

  <a class="img-info" href="#row1">

  <span class="default-img" id="image3">

  <img alt="" src="monkey.jpg">

  <span class="magnify"></span>

  </span>

  </a>

  </div>

  </div>

  <div style="clear:both"></div>

RESULT:

Hope you understand that how it was easy with a simple zoom-in and zoom-out CSS3 property.
If you wants to use multiple images for the gallery then copy a image container [ <div class="swapimg"> - <div>] and paste how many you wants.