Archive for August, 2008

I was planning on writing this one quite a while ago, but I got a little busy and it slipped my mind. Sorry about that! Well, here it is at last, the tutorial that will show you how to display the summary of an image when it is hovered over – for example, the website thumbnails in the link gallery.

Getting Started

Before doing anything else, you must first decide on a fixed size for your image, or images. All subsequent images that need a hover description using the same CSS should have the same size as the first one, because we will be basing our measurements off of it.

For this tutorial, I will be using the scaled down image of a cloudy sky from stock.xchng, the free stock photo resource. This is what the original image looks like when resized to 300×200 pixels:

Preparing The HTML

The thing with CSS is that when using it for styling, there has to be something to apply the style to. Assuming all your images are not the same size and you want this effect on only a select few, we will enclose the image – along with the summary – in nested div elements.

Here is what my code looks like, and what yours should resemble:

<div class="imageshell">
<a href="your-url-here"><span>
<img width="300" height="200" alt="Cloudy Sky"
src="wp-content/uploads/2008/08/tut_cloudimg.jpg" />
<div>
This is a caption for this image, which depicts white clouds
against a beautiful blue sky. This space, besides containing text,
can also house other media – you can even treat it like a small
individual web page (within limits, of course).
</div>
</span></a>
</div>

Styling It With CSS

Okay, here’s the part you’ve been waiting for – here’s where the fun of making it work begins. Now before you pull out your stylesheet, I need to remind you that this code is based off the size of the image you are using, and you may have to modify it to suit your needs. With that out of the way, here’s the magic recipe:

.imageshell{
width:300px;
height:200px;
text-align:left;
}
.imageshell a:hover div {
color:#333333;
display:block;
}
.imageshell div {
background-color:#F3EBCC;
display:none;
width:290px;
height:190px;
position:relative;
padding:5px;
left:0px;
top:-200px;
}You will notice that the size of the inner div is smaller than the image by 10px each on height and width (or 5px on each side) – this allows the padding to expand it to fill the image. Of course, you are free to modify any part of the code as you please, for example changing colors, sizes and padding. Some modifications may break it, but that depends on what you are trying to do.

Note: The most probable thing you will need to tweak is the top and left attributes in the style for the inner div. This is because it depends on the default border and padding settings on your image from the pre-existing CSS.

The Final Product

I’ve removed the example that was here for W3C reasons, you will find the end product in the link gallery. Leave a comment if you have any issues. Demo here.