CSS Tricks
Display Thumbnails as Part of 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.
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">
<div class="phototitle">Photo description goes here</div>
</div>
<div class="thumb">
<img src="120-2.jpg" alt="Sample Image">
<div class="phototitle">Photo description goes here</div>
</div>
<div class="thumb">
<img src="120-3.jpg" alt="Sample Image">
<div class="phototitle">Photo description goes here</div>
</div>
<div class="thumb">
<img src="120-4.jpg" alt="Sample Image">
<div class="phototitle">Photo description goes here</div>
</div>
<br clear="all" />
<div class="thumb">
<img src="120-5.jpg" alt="Sample Image">
<div class="phototitle">Photo description goes here</div>
</div>
<div class="thumb">
<img src="120-6.jpg" alt="Sample Image">
<div class="phototitle">Photo description goes here</div>
</div>
<br clear="all" />
