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:
The Original Image
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:
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.
August 16th, 2008
Sahil Said:
Hmm … nice idea there although, admittedly, I’m not a fan. I guess I prefer my image to still be there when I hover, since most of such images link to their own larger versions. How about making the caption appear as a tooltip, though? (using CSS, of course)
August 16th, 2008
RG Said:
Sadly, tooltips require a tiny bit of javascript thrown in, and I’m averse to using that since some people either don’t have javascript compatible browsers, or surf with it turned off.
You can, however, limit the size and change the position of the descriptive div, as well as its opacity. In fact, you can even have all descriptions for all images appear in the very same place, or have a tiny semi-transparent strip at the bottom containing a caption.
As with all things CSS, the possibilities are practically endless.
August 17th, 2008
Zhu Said:
Awesome! This is exactly what I was looking for. I bookmarked and will experiment when I come back from China.
Thank you!
{Zhu’s last literary creation - Gone To Beijing!}
August 17th, 2008
Juhi Said:
I havnt had the opportunity to try out the hover tricks coupled with ‘display:’ tags, since i first discovered them on a Web Designer Wall tutorial. this tutorial made me itch further…its like JS tricks with CSS…can’t wait to try out!
{Juhi’s last literary creation - one week deep in college}
August 17th, 2008
RG Said:
@Zhu -
You’re welcome! Do tell me how your experiments go.
@Juhi -
If you can’t wait to try it out, just do it…well, after you’re done with those NIFT assignments of course.
August 18th, 2008
Juhi Said:
Exactly. But I will, soon.
{Juhi’s last literary creation - one week deep in college}
August 18th, 2008
DirtyLaundryDiva Said:
This is an asy to follow tutorial, thanks for posting this. I’ll need to give it a try now…
To answer the question you left on my blog, no I am not using wordpress mu. I probably should be huh? Just learned about it when you asked it I was using it. I looked it up. ;-P
August 18th, 2008
RG Said:
Well now that I think about it, MU is not what you’re looking for - it’s more of a multi-blog platform that a multi-user platform. Apparently it’s not named as aptly as it could be.
October 28th, 2008
Essex Said:
Was explaining this to someone and eventually just gave them your link, thanks for a good tutorial
November 9th, 2008
RaSh Said:
Somehow I had missed this post earlier. Really nice trick!
Reminded me of the ThinkQuest site timeline you had made (I still use the same FoldInOut script in my blog!)
Post more tutorials!!
{RaSh´s last literary creation - Looking back at Oasis ‘08}