CSS Photo Gallery

This is an example on how you can display thumbnails as part of a photo gallery nicely with the help of CSS.

You can easily use these thumbnails in combination with making them links too.

Example:

Photo description goes here

Photo description goes here

Photo description goes here

Photo description goes here

Photo description goes here

Photo description goes here

CSS:


div.thumb {
margin: 3px;
border: 1px solid #A0ACC0;
height: auto;
float: left;
text-align: center;
}
.thumb img{
display: inline;
margin: 5px;
border: 1px solid #A0ACC0;
}
.thumb a:hover img {border: 1px solid black;}
.photocattitle {text-align: center; font-weight: bold;}
.phototitle {
text-align: center;
font-weight: normal;
width: 120px;
margin: 0 3px 3px 3px;
}


HTML:


<div class="thumb">
<img src="120-1.jpg" alt="Sample Image" width="120" height="90">
<div class="phototitle">
Photo description goes here
</div>
</div>
<div class="thumb">
<img src="120-2.jpg" alt="Sample Image" width="120" height="90">
<div class="phototitle">
Photo description goes here
</div>
</div>
<div class="thumb">
<img src="120-3.jpg" alt="Sample Image" width="120" height="90">
<div class="phototitle">
Photo description goes here
</div>
</div>
<div class="thumb">
<img src="120-4.jpg" alt="Sample Image" width="120" height="90">
<div class="phototitle">
Photo description goes here
</div>
</div>
<div class="thumb">
<img src="120-5.jpg" alt="Sample Image" width="120" height="90">
<div class="phototitle">
Photo description goes here
</div>
</div>
<div class="thumb">
<img src="120-6.jpg" alt="Sample Image" width="120" height="90">
<div class="phototitle">
Photo description goes here
</div>

</div>