CSS On-Hover Image Captions

Blog » CSS/XHTML » CSS On-Hover Image Captions

CSS On-Hover Image Captions

December 26th, 2008

I was browsing through some gallery style sites and saw some inspirational techniques that I wanted to replicate with my own version and style. This is an add-on to my previous articles “5 Ways to Spice up Your Images with CSS ” and “CSS Vertical Navigation with Teaser“, a little combination of both techniques.

View Demo

The HTML

This is a combination of the image caption and the teaser technique, I nested the caption of our image within a hyperlink. What I want to do, is hide the caption until the user hovers over the image.

To make this technique user friendly, I decided to add a “Learn More” to make it more obvious that the teaser is available on the image.

<div class="imgteaser">
<a href="#">
	<img src="Daim1.jpg" alt="Daim Graffiti" />
	<span class="more">&raquo; Learn More</span>
	<span class="desc">
		<strong>DAIM 2002</strong>
		Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Tation utrum utrum abigo demoveo immitto aliquam sino aliquip.
	</span>
</a>
</div>

Keep in mind, to be XHTML valid, a hyperlink (an Inline tag) can’t contain block level tags. Here is a quick reference.

The CSS

First I will style and establish the parent div and its hover properties.

.imgteaser {
	margin: 0;
	overflow: hidden;
	float: left;
	position: relative;
}
.imgteaser a {
	text-decoration: none;
	float: left;
}
.imgteaser a:hover {
	cursor: pointer;
}

From here, we will add our double border effect on our image

.imgteaser a img {
	float: left;
	margin: 0;
	border: none;
	padding: 10px;
	background: #fff;
	border: 1px solid #ddd;
}

Then we move on to adding the “Learn More” and then styling the caption.

.imgteaser a .more {
	position: absolute;
	right: 20px;
	bottom: 20px;
	font-size: 1.2em;
	color: #fff;
	background: #000;
	padding: 5px 10px;
	filter:alpha(opacity=65);
	opacity:.65;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; /*--IE 8 Transparency--*/
}
.imgteaser a:hover .desc{
	display: block;
	font-size: 1.2em;
	padding: 10px 0;
	background: #111;
	filter:alpha(opacity=75);
	opacity:.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
	color: #fff;
	position: absolute;
	bottom: 11px;
	left: 11px;
	padding: 10px;
	margin: 0;
	width: 566px;
	border-top: 1px solid #999;
}
.imgteaser a:hover .desc strong {
	display: block;
	margin-bottom: 5px;
	font-size:1.5em;
}

At default, we want the “Learn More” to show, and when hovered, we want to hide that and show our caption. For some reason IE6 was not hiding the “Learn More” when using display: none; , but using visibility:hidden; seemed to do the trick.

.imgteaser a .desc {	display: none; }
.imgteaser a:hover .more { visibility: hidden;}

Conclusion

This is a useful technique when running image galleries and such, where you have short captions explaining the details of the image. One site that uses this approach pretty well is www.designflavr.com. I like how they show the number of comments when hovering over each image.

View Demo

61 Responses to “CSS On-Hover Image Captions”

Dec 26th, 2008 @ 3:35 pm Esg

Nice tut! You could also reduce the opacity with alpha:

background: rgba(0,0,0,.25)
Dec 26th, 2008 @ 4:59 pm Adrian Favier

This has been done so many times before.. surely you have something original to share with your readers..? Fail.
Dec 26th, 2008 @ 5:07 pm Neal

Great tutorial, I was looking for this without the javascript and you had it. Thank you.
Dec 26th, 2008 @ 6:41 pm Soh

Thanks for the feedback fellas~

Adrian, I try to share techniques for people of any level. Perhaps this one has been done already (seems like you have seen it many times, I personally have not), but my purpose is to share as much as I can for those who might not know and who are seeking the information.

If the things I share doesn’t live up to your expectations, you are more than welcome to just neglect my posts. I’m only sharing because I’m passionate about this and because I want to give back to the community.

Thanks for the mature and constructive comment
Dec 27th, 2008 @ 12:43 pm Jacob

a fine example of a class A deuche comment from Adrian. If thats even his real name… Soh, your articles have taught me alot and Im sure many others. Keep on truckin and dont let these trolls slow you down!
Dec 28th, 2008 @ 4:09 pm Martin Rogalla

Adrian please don’t be so rude.
This post is probably not the first one on this subject, but it most certainly shows us some different aspects. I’m thinking on using this for one of my projects.It looks great and he had a nice buildup in his post.
Thanks Soh!
-Indeed… don’t let him slow you down. I love your posts xD
Dec 31st, 2008 @ 7:33 am Ricky

@Adrian:

I don’t see any ads on this site. Soh is simply giving out valuable information, regardless of whether you’ve seen it or not. You should be saying “Thank You.”
Jan 7th, 2009 @ 8:15 pm zerolux

good stuff. i like the fact that you used the daim piece for the example.
Jan 13th, 2009 @ 12:07 am Soh

Zerolux, yea DAIM is outa control!! I’m a big fan of his pieces.
Jan 14th, 2009 @ 6:58 am jan geloen

When I put a image nested in a hyperlink in the div it works no problem. But when i put that div inside a table the image moves out of the div and out of the table? When i remove the hyperlink so that it is just an image in a div in a table everything stays in place but with no hovering. when i put the hyperlink back things move again…
Ideas?
Jan 14th, 2009 @ 7:31 am Soh

Hey Jan, do you have a sample link of what your talking about?
Jan 14th, 2009 @ 2:20 pm jan geloen

I kinda got it to work on my site now: http://www.jangeloen.be. Works on all browsers. Butt on IE when you press the alt-button stuff gets weird. I have no idea why that is. You can find my stylesheet here: http://www.jangeloen.be/Scripts/jangeloen.css
Jan 14th, 2009 @ 2:27 pm Jan

I know that most of it is dirty html and css… I’m not a web designer i’m a photographer. I try to make it as compatible/userfriendly and fast as possible and still meet my design needs/vision.
Jan 14th, 2009 @ 2:30 pm Jan Geloen

hmm the comment box is going nuts here… to be sure:
Example: http://www.jangeloen.be
My stylesheet: http://www.jangeloen.be/Scripts/jangeloen.css

Got it to work on most browsers but on IE it goes nuts when you press the alt-key. Weird. I work on Vista SP1.
Jan 14th, 2009 @ 2:46 pm Soh

Hey Jan~

I took a look at your site (great photos by the way!!), I viewed it in both IE6 and IE7 and could not replicate any craziness going on, I also didnt understand what you meant by pushing the alt button? Im on XP and not on Vista, could this be why?
Jan 14th, 2009 @ 2:52 pm Jan Geloen

So it works on IE 6 and 7! Great. It still does crazy things when i press the alt-key on my keyboard (the one on the left of the spacebar). In vista this toggles the menu bar. It kinda overlaps my images…
Thx for the quick comments!
Jan 15th, 2009 @ 12:46 am Kees

This is just what I was looking for. However, in IE (XP, IE6) I don’t get it to work properly. Things go wrong when you scroll. I don’t know how many images there will be in the end, bust scrolling will always be necessary. In Opera and FireFox it works like a dream.
I need it to work in IE too, as 63% of our visitors use it.
For the example see http://www.vltest.com/test
Jan 15th, 2009 @ 8:07 am Soh

Hey Kees!

Your main issue was you were using a 200px width when you also had 10px padding on both sides of the container. This was leading to having a 220px width which is why your layout broke in IE6.

Here is a working demo: http://www.sohtanaka.com/web-design/examples/image-hover/kees.htm

Here is a sample code:

.imgteaser a:hover .desc{
display: block;
font-size: 10pt;
padding: 0;
background: #111;
filter:alpha(opacity=100);
opacity:1;
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”; /*–IE 8 Transparency–*/
color: #fff;
position: absolute;
bottom: 0px;
left: 0px;
padding: 10px;
margin: 0;
width: 180px; /*–Since you have 10px on each side, you should subtract from your total width–*/
border-top: 1px solid #999;
text-align: left; /*–When hovered you want to go back to text align left *see .imgteaser a –*/
}
.imgteaser a:hover .desc strong {
display: block;
margin-bottom: 0px;
font-size:10pt;
}
.imgteaser a{
text-align: right; /*–Since your using absolute positioning to the right, maybe text-align right would be good so when it bumps down to the next line you can achieve consistency–*/
}

let me know if you have any questions
Jan 15th, 2009 @ 12:04 pm Kees

Thanks Soh,

but when I view your example in IE6 it still won’t work for me. I mean, initially (after the page loads or refreshes) the images and captions are placed perfectly and work ok. But the problem occurs when I scroll down (and up). The scroll bar moves, but the content of the page doesn’t. Then when I move the pointer over the images, some will jump to the new scrolled location suddenly and some disappear alltogether.
I know it’s a bit of a foggy explanation, but I don’t know how to explain it otherwise.
To sum up: The problem is scrolling, not the positioning of the images and captions. I have tried different widths, positions, colours, etc. That all works fine.

In the end I tried another way of positioning the images and captions and that works in IE, but it is not nearly as beautiful as your solution. It is evening here now and I’m not at work anymore, but I will put the other page in http://www.vltest.com/test2 tomorrow.

Thanks again for your help,
Kees.
Jan 15th, 2009 @ 1:38 pm Soh

Kees,

Thank you for that detailed explanation, I believe I pinpointed the bug~

The css should of been the following: (I had the position:relative on the a tag instead of the .imgteaser base class.

Hope this fixes your bug! Let me know~

.imgteaser {
margin: 0;
overflow: hidden;
float: left;
position: relative;
}
.imgteaser a {
text-decoration: none;
float: left;
}
Jan 15th, 2009 @ 11:26 pm Kees

Thanks Soh,

it is better now, but still the scrolling is weird. I have updated my example in http://www.vltest.com/test and put my other trial page (less nice, but I’ll have to use something like that if all else fails) in http://www.vltest.com/test2.
If you look at the example in a window that is e.g. 2.5 images wide, initially all’s well. Then scroll down without moving the mouse pointer over images. Nothing will move. Now move the mouse pointer to another image and the content will jump to the new location in the window. At least, that’s what happens when I look at it in IE6. Also the ‘more’-part of the caption disappears after you have moved the mouse pointer over it, but that is probably because I have been experimenting with spaces between images etc.
I also checked IE7: the ‘more’-part is OK, but the scrolling is the same as in IE6. Also in IE7 an image doesn’t float left as long as there is space for a part of it on the right side of the window.
So, it is better than yesterday, when the whole layout was messed up. In FF and Opera it still works perfectly.

Kind regards,
Kees,
Jan 16th, 2009 @ 6:29 am Kees

Update on my previous message:

I have been fiddling around with the code. The only problems that remain are the weird ‘jump-scrolling’ in IE 6 and 7 and the fact that in IE7 the images do not flow to the next ‘line’ if part of an image is still visible. The rest is a matter of finetuning the design (margins, sizes, colours, etc, no problem).

See http://www.vltest.com/test

Kind regards,
Kees.
Jan 18th, 2009 @ 12:12 pm Kees

Update again:

I think my boss will probably want the images centered on the page. It looks nicer. This eliminates the ‘flow left’. I have a setup on http://www.vltest.com/test3. Maybe I can combine this layout with your rollover effect without my weird IE problems.
For now the layout works in Opera 9.27, Forefox 3 and IE6.

Regards,
kees.
Jan 19th, 2009 @ 11:19 am Soh

Hey Kees,

I stripped out your css to only leave this tutorial’s techniques and found I resolved the bug once I deleted your html and body properties. I would investigate your surrounding properties first, because this tutorial’s technique by itself seems to be working properly.

Now I’m viewing your http://www.vltest.com/test page in IE7/IE6 and it seems the only issue I’m seeing is the scrolling aspect of the page. I see that it is difficult and buggy when you are trying to scroll down when I minimize the browser to make the content go below the fold.

Do you have Gtalk or aim? I’m sure we can resolve this issue if the communication was better
Jan 19th, 2009 @ 12:07 pm Kees

Hi Soh,

thanks for your help. I know your technique works properly. I tried your example first in different browsers, before I decided to use it.
The problem is I am not a professional web designer, so the way I make a website is 50% knowledge of HTML and CSS and 50% looking at other websites and copying and adapting some of their code (a lot of trial and error). This results in buggy code. But I am happy if I can get it to work in the current browsers.

For now I am going with the method I used in http://www.vltest.com/test3 (centered gallery with captions). I have tested this in Opera, Firefox and IE6 and 7. I got it to work properly in the first 3 browsers quite quickly. IE7 didn’t want to play ball at first, but after a lot of trial and error (had to delete one ‘*’ in the stylesheet) that works now too.
I might try to combine your method with that example later on, but first I must get on with the content for the rest of the pages. My boss wants to see some results of course.

Thanks again for your help. I will build the testsite in http://www.vltest.com/test3. You can follow the progress there if you are interested. Be my guest to comment or point out bad code any time.

Cheers,
Kees.
Jan 20th, 2009 @ 10:43 am Soh

Hey no problem Kees!
If you have questions feel free to just email me as well
Jan 21st, 2009 @ 4:58 am chris

hey thanks very much…you saved me many hours of work and hair pulling… sad about the one spoilt apple (adrian)…. Just not necessary.
Jan 21st, 2009 @ 5:15 am Helen

I have used this code (thank you very much – I was looking for a solution to my problem and I got it) and adapted it to work with my photo gallery. What I can’t work out is why the captions for the different pictures keep moving towards the right – as far as I can see it’s not the photo gallery causing it. I have attempted to use different positioning but it makes things even worse. Do you have any ideas why this might be happening?
I am new to CSS and still working my way through it, but I honestly can not even see where the problem is!
Thanks!!
Jan 21st, 2009 @ 2:13 pm Helen

http://www.je-test2.co.uk/instructors.html – is the page where you can see the problem! Thank you!
Jan 21st, 2009 @ 4:10 pm Soh

Hey Helen!

I did notice you are missing some properties in your css mainly the position: relative, and your html also does now follow my example in this tutorial. (it does not have to follow it to a ‘T’ but it should follow the logic behind it)

My suggestion would be to first create your gallery by itself without the rest of the site. This allows you to focus on the bug w/out other potential elements being a problem.

Once you get that to work properly then you can go ahead and move it into your template.

Let me know of your updates and we’ll take another stab at this
Jan 28th, 2009 @ 3:35 am Kenny

Great script thank you, I was looking for somethign like this for ages.

k
Jan 28th, 2009 @ 3:42 am Kenny

Just a quick question, were I to have more then one image of different width and height on my page and wanted to add your rollover effect. What could I do to an inline css to add css to each image showing the width.

Have you any suggestions as to how I can add this to at least 3 different size images on my site page.

regards

k
Jan 28th, 2009 @ 2:16 pm Soh

hey Kenny~

It should be something similar to my comment here: http://www.sohtanaka.com/web-design/spice-up-your-images-with-css/#comment-547

Mixing that technique and this tutorial should do the trick
Feb 1st, 2009 @ 3:42 pm Helen

Thank you for your help before – I truely love this code, it has helped me so much.
I built the page up again as suggested and it worked, however… as per usual I have changed what type of photo gallery I use. Now it works peachy except in Firefox. I can’t work it out as both yours and Kees sites work in Firefox with the same code!
The page is once again http://www.je-test2.co.uk/instructors.html
You can see in IE that it works fine, and even works (kinda) in Opera, but oh no Firefox will not comply!
I might think about building the page up again, if all else fails but it took me ages to wrap my head around the new code so would rather not!!
Thank you for any help you can offer me )
Feb 7th, 2009 @ 9:24 pm canelson

Thanks! This is just what I was looking for to implement in my tumblr website where I’m publishing my 365 project. I hope it works fine. Regards!
Feb 9th, 2009 @ 4:22 am Anurag

Please send me your 365 project
Feb 14th, 2009 @ 1:52 pm D_E_R_M_A_N

thanks……………
Feb 15th, 2009 @ 3:05 am sivas

very good, thanks
Apr 10th, 2009 @ 10:18 pm Bruno

Great tutorial, but I have one question/request: Is it possible to use jQuery to achieve a fade in/fade out transition for the span when you hover the image? Of course without breaking the basic CSS version, so it can degrade gracefully for those who don’t have Javascript..
Apr 11th, 2009 @ 9:39 am Soh

Sure, I can write one for you. Give me a couple weeks since I have a couple lined up already
Apr 12th, 2009 @ 1:33 pm Bruno

That would be awesome! Thanks. I’ve tried to figure out how to do it myself, but with no luck. Guess it’s about time I sit down and actually learn a bit more about JavaScript and jQuery…
May 22nd, 2009 @ 7:19 am Daniel

why did you float the div to the left??
May 23rd, 2009 @ 12:54 am mahesh

can we get the span (.desc) to inherit the width from the image? as it is, it seems there has to be a separate caption span for each image with different width!
Jun 14th, 2009 @ 1:23 pm Jason

Its been said already, but thank you for this simple and diverse method of adding captions without java. You saved me plenty of time! Please keep up your good work.
Jun 23rd, 2009 @ 8:23 pm Keenan

Hey Soh, great tutorial (though for the most part I just used the code example). Anyway I was wondering if there’s a way to display images with this, without breaking the effect? Thanks!
Jul 6th, 2009 @ 8:38 pm Phil

Great tut. I’m trying to put a link (for photo credit) inside the caption only. Is there a way to make the link available only once the caption is displayed, rather than making the whole image a link? I tried nesting spans, but couldn’t get it to work.
Jul 7th, 2009 @ 6:29 pm Max.W

Thanks for this! It was exactly what i needed and works perfectly.
Jul 22nd, 2009 @ 7:13 am mark

I’m a beginner in web designing and this is very helpful to me..
thanks man.

I just want to ask a great web developer like you. Joomla!, Wordpress or Drupal?? I know the answer is “It depends” but most likely what do you use in your projects?

btw nice footer design.
Jul 29th, 2009 @ 2:57 am Makdumul Islam

Great, exactly what I needed. Thanks thank you so much.
Aug 9th, 2009 @ 6:43 am Ryan Egan

So far so good, this is great. if it wasnt for tutorials like this I’d have no chance, so cheers!!!
Aug 15th, 2009 @ 8:59 pm Finn

Hey, thanks for the tutorial man, it’s really useful. Your site really inspired me and is still one of the best looking and most practical sites I’ve evern seen.
Cheers.
Aug 17th, 2009 @ 10:32 am davemc

Hi Soh,

this is a lovely piece of code and ta very much for sharing.

I have a small problem with though – it’d be great if you could take a look. Everything works like a charm in FF and Chrome but not in IE8. It’s losing the white 10px padding around the image in IE8.

The desc seems to be hanging a little to the left as well.

I’m building the site in Wordpress so I’m hoping this isn’t an issue.

page is at http://www.endamcdonagh.com. I’m using the same html as you and, bar some font changes and the width of the desc, the css is the same.

Any ideas?

Thanks,

davemc
Aug 18th, 2009 @ 8:50 am davemc

never mind, worked up a bit of a happy medium fix.

ta for the code again.
Aug 22nd, 2009 @ 10:10 pm Think.Point.Click.

Hey Soh,

Man it took me two hours of surfing to find your website, but I’m glad I finally came across it. I needed to put more detail on some images because a few of the site visitors did not know what to do when they made it to the product page. This was perfect! Excellent job, in all it took about 15 minutes from start to finish. Here is the final result if you want to check it out http://www.edubasics.com/ourproducts.htm I added

.imgteaser:hover img {
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
}

to change the opacity of the image when you hover.

Thanks again,
Ivan
Oct 6th, 2009 @ 10:49 am Brad

A million thank yous for this! With a little bit of code manipulation, I was able to get this EXACTLY as I desired on my website. Thank you so much!!!

b
Oct 9th, 2009 @ 11:41 am Oscar

Hey, great stuff.. but!

I would like to be able to put links in the caption text, but its not possible. The (a href=”#”) collides with any new (a href) you put in the caption.

what does the (a href=”#”) do really?
Is there a work around?

I would really appriciate any help!

(delete previous post)
Oct 14th, 2009 @ 7:23 pm Kel

Thanks for the tutorial. I noticed that the image caption can be read and indexed by Google.

Is there a way to have the caption not seen by Google but just seen by users to the site? I want to keep duplicate content on the sidebar at a minimum and if I could accomplish the above, it would help greatly.

Thank you
Oct 21st, 2009 @ 6:22 am VK

How do you get this to work with text instead of pics. I need to get this working with a name then I can put in a pic of the name and info about it.
Nov 13th, 2009 @ 9:28 am George

I’m using the “Spotless” wordpress theme for my photo-blog. It looks great, but I would like to be able to add anecdotal information to each main image (not Exif) without taking away from the clean design. I figured that a hover caption was the answer and came across On-hover which is exactly what I need.

Setting up the blog… http://www.coppercoastworkshops.com/minimalistics/ …took me an age. But the problem is that I really don’t have a clue where the above code is placed – although I would imagine it’s on the style sheet.

If there’s anyone out there who could point this newby in the right direction I would be so grateful. Thank you. George
Dec 7th, 2009 @ 8:34 am Dandroid

Great tutorial, this is exactly what I needed (the I.E. fixes are what I was really wrestling with). Thanks
Jan 14th, 2010 @ 4:14 pm ecommerce

Hi, this is great tutorial and I’ll use it in client ecommerce website hope that will work on dynamic site too, by de way thanks for code.

tina

Speak Your Mind…

Can't find what you're looking for? Don't be afraid to use the search, or simply just ask!

Blog Categories

Latest Blog Posts
CSS / XHTML / jQuery Tutorials
Everything CSS , XHTML & jQuery - Tutorials, tricks, tips and more.
Web Design Articles
All of my deep thoughts, articles, procedures, experiences, insight, and more.
Design Tutorials
Anything from design tips, Photoshop tutorials, and more.
Search Engine Optimization Tips
Search Engine Optimization tips, resources, techniques, and more
Resources & Tools
Fonts, Downloads, Tools, Plug-ins, Add-ons, and more!
Personal Interests & News
All of my personal interests and site updates. Stay up to date with whats happening.

CSS On-Hover Image Captions