CSS design image gallery

To design an image gallery, first create img1 class:

 div.img img1
{
  margin: 2px;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
  display: inline;
  border: 1px solid #ffffff;
}

 Note: div.img img1 {} applies style to an img element which is a descendant of a div element with the class "img1", for the example below, it is applied to <img src="/_img/banner_........
To add hover effect on images, define hightlightimg class to change image border color:

 .hightlightimg:hover img{border: 1px solid #0000ff;}

Finally, put 4 images side by side:

    <div  class="img1">
<a class="hightlightimg"><img src="/_img/banner_5.png"  width="270" height="130" /></a>
 <a class="hightlightimg"><img src="/_img/banner_4.png"  width="270" height="130" /></a>
<a class="hightlightimg"><img src="/_img/banner_3.png"  width="270" height="130" /></a>
 <a class="hightlightimg"> <img src="/_img/banner_2.png" width="270" height="130" /></a>
</div>

Reference:
http://www.w3schools.com/css/css_image_gallery.asp