CSS Image Gallery

« Previous Chapter Next Chapter »

Image Gallery

The Below image gallery is created with CSS:

Example

<html>
<head>
<style type="text/css">
div.img
  {
  margin:2px;
  border:1px solid #0000ff;
  height:auto;
  width:auto;
  float:left;
  text-align:center;
  }
div.img img
  {
  display:inline;
  margin:3px;
  border:1px solid #ffffff;
  }
div.img a:hover img
  {
  border:1px solid #0000ff;
  }
div.desc
  {
  text-align:center;
  font-weight:normal;
  width:120px;
  margin:2px;
  }
</style>
</head>
<body>

<div class="img">
  <a target="_blank" href="abcbook_li100.png">
  <img src="../../images/abc_li100.png" alt="abcbook" width="110" height="90" />
  </a>
  <div class="desc">Add a description/explanation here</div>
</div>
<div class="img">
  <a target="_blank" href="abcbook_li100.png">
  <img src="../../images/abc_li100.png" alt="abcbook" width="110" height="90" />
  </a>
  <div class="desc">Add a description/explanation here</div>
</div>
<div class="img">
  <a target="_blank" href="abcbook_li100.png">
  <img src="../../images/abc3_li100.png" alt="abcbook" width="110" height="90" />
  </a>
  <div class="desc">Add a description/explanation here</div>
</div>
<div class="img">
  <a target="_blank" href="abcbook_li100.png">
  <img src="../../images/abc4_li100.png" alt="abcbook" width="110" height="90" />
  </a>
  <div class="desc">Add a description/explanation here</div>
</div>

</body>
</html>
Code it Online »

« Previous Chapter Next Chapter »
Have Any Suggestion? We Are Waiting To Hear from YOU!

Your Query was successfully sent!