Creation Of Simple CSS Gallary

This blog is about creating a beautiful gallery and the best thing is that there is no JavaScript in it, even a single line of code.

I am simply using HTML and CSS

HTML Code:

It consist of two block of pictures. You just have to click left side of block which contains small pics in order to switch between images. Here's a code:

  <div id="Gallery">
  <ul id="navigation">
    <li><a href="#pic1"><img alt="" src="small_Tom.jpg" /></a></li>
    <li><a href="#pic2"><img alt="" src="small_Jerry.jpg" /></a></li>
    <li><a href="#pic3"><img alt="" src="small_Dexter.jpg" /></a></li>
    <li><a href="#pic4"><img alt="" src="small_Popeye.jpg" /></a></li>
    <li><a href="#pic5"><img alt="" src="small_Minions.jpg" /></a></li>
  </ul>
  <div id="Full-Pics">
    <div><a name="pic1"></a><img alt="" src="large_Tom.jpg" /></div>
    <div><a name="pic2"></a><img alt="" src="large_Jerry.jpg" /></div>
    <div><a name="pic3"></a><img alt="" src="large_Dexter.jpg" /></div>
    <div><a name="pic4"></a><img alt="" src="large_Popeye.jpg" /></div>
    <div><a name="pic5"></a><img alt="" src="large_Minions.jpg" /></div>
  </div>
</div>

CSS Code:

CSS is used for defining size as well as the other designing conditions. Here's a code:

  #Gallery
  {
  width: 800px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  margin: 100px auto;
  border: 1px solid #003C72;
 }

#navigation
 {
  list-style: none;
  padding: 0;
  margin: 0;
  float: left;
  }

#navigation li 
 {
  padding: 0;
  margin: 0;
  float: left;
  clear: both;
  }

#navigation li a img 
 {
  display: block;
  border: none;
 }

#navigation li a 
 {
  display: block;
 }

#full-picture
 {
  width: 500px;
  height: 375px;
  overflow: hidden;
  float: left;
 }
Ebook Download
View all
Learn
View all