Creation Of Simple CSS Gallary

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 consists of two blocks of pictures. You just have to click the left side of the 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;
}