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>

Join the conversation! Your thoughts help the community grow.