Clickable CSS Thumbnails on a Sidebar

I wanted to put some clickable thumbnails on a sidebar with a nice highlighting effect when you hover over them. Here’s the basic markup I used for each thumbnail:

<div class='webnail'>
<a href='http://.....html'>
<img alt='CSS Tutorials' src='images/t1.jpg' title='CSS Tutorials'/>
</a>
</div>

<div class='webnail'>
<a href='http://....html'>
<img alt='Welcome' src='images/q4.jpg' title='Welcome'/>
</a>
</div>

For the styling, I first float the webnail divs right to align them to the right edge of the sidebar:

.webnail {
float: right;
}

Next I want to make sure that the thumbnail images have their margin and padding zeroed out. In this case I had to use a pretty specific selector to override some defaults coming from Blogger:

#left-sidebar-wrapper .sectiondiv .webnail img {
margin: 0;
padding: 0;
}

Now, the most important step, is to style the links: the main idea here is that we want the link to be a little bit bigger than the image that it contains, so that when we hover over the link, we can highlight a rectangular region around the image. Since all the thumbnail images are 100x100 pixels, we make the link content box the same size by setting both width and height to 100px. In order for those dimensions to be meaningful, we need to display the link as a block box, rather than inline, and that’s what the “display: block” statement does. Then we add a 4 pixel padding which will give us some white space between the image and the border we’ll put around the link. That padding area will aso be used to highlight the link we are currently hovering over. For the border, I used a shade of grey 1px wide. Finally, we also add some margin to keep the thumbnails separated from each other.

.webnail a {
height: 100px;
width: 100px;
display: block;
padding: 4px;
border: 1px solid #CBCBCB;
margin: 0 3px 20px 10px;
}

The last step is to set the background on the link when we hover over it. This will produce the highlight effect using the 4px padding area that surrounds the thumbnail image :

div.sectiondiv div.webnail a:hover {
background: #a9d7e4;
}