Slide 5.28: CSS navigation bar (cont.)
Slide 5.30: CSS image opacity/transparency
Home

CSS Image Gallery

Klematis
Add a description of the image here
Klematis
Add a description of the image here
Klematis
Add a description of the image here
Klematis
Add a description of the image here









CSS can be used to create an image gallery. The above example demonstrates an image gallery, whose source code is given below: 

 <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 href="klematis_big.htm">
     <img src="klematis_small.jpg" width="110" height="90" /></a>
    <div class="desc">Add a description of the image here
   </div>
   <div class="img">
    <a href="klematis2_big.htm">
     <img src="klematis2_small.jpg" width="110" height="90" /></a>
    <div class="desc">Add a description of the image here
   </div>
   <div class="img">
    <a href="klematis3_big.htm">
     <img src="klematis3_small.jpg" width="110" height="90" /></a>
    <div class="desc">Add a description of the image here
   </div>
   <div class="img">
    <a href="klematis4_big.htm">
     <img src="klematis4_small.jpg" width="110" height="90" /></a>
    <div class="desc">Add a description of the image here
   </div>
  </body>
 </html>


Demonstration
The following demonstration shows how the script of HTML and CSS is displayed on the Web: