CSS On-Hover Image Captions
Blog » CSS/XHTML » CSS On-Hover Image CaptionsCSS 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.
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">» 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.
Subscribe via RSS ,by email, or by twitter to get all upcoming
tutorials and articles delivered straight to you.
Bookmark or Share this Post!
Tags: CSS Image Tricks
This entry was posted on Friday, December 26th, 2008 at 1:07 pm and is filed under CSS/XHTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Popular Posts
Recent Comments
Nice tut! You could also reduce the opacity with alpha:
background: rgba(0,0,0,.25)
This has been done so many times before.. surely you have something original to share with your readers..? Fail.
Great tutorial, I was looking for this without the javascript and you had it. Thank you.
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
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!
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
@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.”
good stuff. i like the fact that you used the daim piece for the example.
Zerolux, yea DAIM is outa control!! I’m a big fan of his pieces.
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?
Hey Jan, do you have a sample link of what your talking about?
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
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.
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.
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?
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!
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
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
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.
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;
}
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,
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.
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.
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
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.
Hey no problem Kees!
If you have questions feel free to just email me as well
hey thanks very much…you saved me many hours of work and hair pulling… sad about the one spoilt apple (adrian)…. Just not necessary.
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!!
http://www.je-test2.co.uk/instructors.html - is the page where you can see the problem!
Thank you!
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
Great script thank you, I was looking for somethign like this for ages.
k
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
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
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 :o)
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!
Please send me your 365 project
thanks……………
very good, thanks
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..
Sure, I can write one for you. Give me a couple weeks since I have a couple lined up already
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…
why did you float the div to the left??
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!
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.
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!