Reader Jason Lucchesi send me in a neat demo of image captions sliding in overtop an image on rollover. The effect used a bunch of nested divs to get it done, so I thought I’d do my own version of it using the standard HTML5 structure for an image with a caption, and CSS3 it up.
Why do something like this at all? Perhaps saving space in a layout. Perhaps the captions themselves are a distraction in a specific design and it’s cleaner to only reveal them conditionally. I dunno, it’s just a demo. If you don’t like it, don’t use it.
HTML5 Structure
Nothing here other than pure and semantic markup of an image with caption.
<figure>
<img src="yay.jpg" alt="">
<figcaption>
yay!!!
</figcaption>
</figure>
CSS Structure
The figure
element wraps everything and is our basic building block. The empowering concepts start here. The figure
will need to have position: relative;
so we can absolutely position the caption exactly where we want it and not have it take up any additional space. We also need overflow: hidden;
so as we do our sliding, the caption disappears outside the boundary of the figure
.
figure {
display: block;
position: relative;
overflow: hidden;
}
figcaption {
position: absolute;
background: rgba(0,0,0,0.75);
color: white;
padding: 10px 20px;
}
Hot Sliding Action
We need to hide the captions so that we can reveal them with hot sliding action when the image is rolled over. Let’s position the caption slightly beyond the lower left and hide it entirely with opacity. Then when the figure is hovered, we’ll slide it into place and adjust the opacity back up. To get it to actually slide, we’ll use transition
.
figcaption {
position: absolute;
background: rgba(0,0,0,0.75);
color: white;
padding: 10px 20px;
opacity: 0;
bottom: 0;
left: -30%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
left: 0;
}
Options, options
In the demo, the position and slide in direction is different on each of the images. We do that just by adding class names to the figures and positioning things different according to the classes.
<figure class="cap-top">
.cap-left figcaption { bottom: 0; left: -30%; }
.cap-left:hover figcaption { left: 0; }
.cap-right figcaption { bottom: 0; right: -30%; }
.cap-right:hover figcaption { right: 0; }
.cap-top figcaption { left: 0; top: -30%; }
.cap-top:hover figcaption { top: 0; }
.cap-bot figcaption { left: 0; bottom: -30%;}
.cap-bot:hover figcaption { bottom: 0; }
So, how do people know there is a caption at all?
If you are going to go through the trouble of having fancy captions, it would be a shame (read: UX FAIL) if there was no indication they were even there. Let’s indicate the presence of a caption with a subtle question mark indicator. Rather than using non-semantic extra markup to do this, we’ll use generated content in the form of a pseudo element on the figure.
figure:before {
content: "?";
position: absolute;
background: rgba(255,255,255,0.75);
color: black;
width: 24px;
height: 24px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
text-align: center;
font-size: 14px;
line-height: 24px;
/* Only Fx 4 supporting transitions on psuedo elements so far... */
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
opacity: 0.75;
}
figure:hover:before {
opacity: 0;
}
Note there is no positioning values on the CSS above, despite the position: absolute;
. The position will depend on the option classes we set up. You’ll probably want the question mark placed in the corner the caption slides into. So like:
.cap-left:before { bottom: 10px; left: 10px; }
Usage
As with anything you find on this site. Please use this on whatever you dang well please. Preferably big fancy corporate projects where you tell your boss this was all your idea and you get a big raise.
I really like this! Great work!
It would be also nice to add a border-radius to the inner corner :)
greetz
Jonny007
Your site’s style is broken in chrome 11
I have noticed that too… something went wrong with the CSS…
I’ve send him a Tweet on this issue already – may he is a bit busy ;-)
awesome, i will try it on my blog. hehe
Very cool. I expected some use of javascript would be needed for this. Thanks for sharing.
Looks good, though would be nice list list what browsers it does and doesn’t work in.
:before – all except < IE7
figure, figcaption – HTML5 browsers.
transition, border-radius, rgba, opacity will have an acceptable drawbacks.
How do you incorporate this little trick in WordPress? I use the HTML5 version of TwentyTen for the theme in question.
Just add the code to a post or a widget, and be sure the declaration is
Sorry for double comment, no preview comment form…
Make sure that the declaration (meaning the CSS code) is in the CSS code style sheet in the theme directory? Is that what you meant? CSS Text in the CSS, HTML in the actual post?
Neat. Very Neat.
Quick suggestion, what if we replace “?” with “i”?
I have not really learnt much of html5 and only the main parts of css3.
So what would happen?
haha i really should spend some time learning it.
That will work just fine.
The content property can hold pretty much anything really.
Armageddon Peter. Armageddon.
Thanks … Great tip. Chris.!
Bit unrelated here Chris but do you ever drink in the Prancing Pony?
hrrr…
few days ago i was loking for such thing.
Works in my version of Chrome, Ben.
You forgot to mention an important style definition:
img {display: block;}
Without that, the figcaption does not align accurately to the bottom and right margin of the image.
This is great tutorial and this has both HTML5 and CSS3! Also, the new look of the site looks really good with CSS3 and HTML5…
Very nice demo : )
It would be nice of you also minimize the CSS code as you did with the HTML5 markup, for example:
you don’t need vendor specific prefix for the border-radius, only border-radius: 12px; will work in both Firefox and Chrome without the need of adding -moz- and -webkit-
I think this will work on IE9 as well (didn’t test it) but probably you’ll have to declare all corners border-radius: 12px 12px 12px 12px; for it to work on IE9.
IDK how to edit my previous comment, but I wanted to point out that I was talking about current browsers versions (Chrome10, Firefox4, & IE9)
I am noticing a change in your tone Chris. Maybe its just me
A great demo of using the new HTML5 tags.
I’ll try and implement it in a sidebar, often a place where space is tight.
Thanks again.
First there was “PFF! Fuck flash”.
The Time has come “PFF! Fuck JavaScript.” :)
Please star offensive or obscene words next time. You know, kids/young adolescents also view this website.
Thanks =)
Really Great work .. i like this .
Doesn’t work in IE8 and below, but still a very cool experiment!
Awesome, got to try this at once.. thanks for sharing. Downloading now.
Nice one Chris :) I have done something similar some months back – http://blog.cooljaz124.com/labs/css3/slick-css3-animated-image-caption/
I think we’ll be seeing plenty of this in the near future. Seems like a fantastic alternative to the joys (or not so) of Jquery and Flash to do similar tasks – nowhere near as long winded as well! Personally I’ve not took the plunge into the depths of HTML5 (purely due to the BETA feel of some aspects) as of yet, but in my next site I’m going to have a play around with some tricks such as this so thank you for getting me excited! I can see some really nice designs coming from HTML5 tutorials such as this one in the future!
Nice. Clean and effective, and clearly explained/demonstrated. This is something I’ll use.
(BTW, I really like having the CSS and markup shown separately at the right in the demo.)
Thanks
Very nice, Chris, love your work!
The bit about Usage really made me smile..
Cool, although we now this won’t work in IE, and every client I have – everything must always work in IE 6 and up. Man I hate IE. Pick your version.
Integrating this with the Anything-Slider (optionally of course) seems like a good idea.
Everyone, especially Chris, what do you think?
That’s freakin’ awesome! Thanks! Time to change my code and use this one instead… LOL
I like it !
Thanks for sharing Chris
This actually degrades pretty nicely in IE7/8. The captions sort of peek out giving the indication that they exist at all. They don’t smoothly transition, but they do come out.
With IE6, you’d just make remove the hidden state and this would be perfect. Pretty cool technique.
Thanks so much man this is great!
Chris im having some trouble with getting the captions to work on firefox and not entirely sure why?
http://www.stickbagbuddy.co.uk/ben/index1.html
Here is the website mock up it works perfectly fine on chrome but firefox just fades out the ? box ne ideas?
Hey, wonderful! I don’t know if I’ll be using it in the future or not but I sure am looking forward to learning HTML5 & css3 and here’s another one to learn !!
Thanks, it’s wonderful because its short and its really easy!!
i think this can be done with jQuery Cycle with “shuffle” effect
Thank you for your idea. I will test it on my own website, because i like it.
i think this can be done with jQuery Cycle with “shuffle” effect
this feature is avilable in “Autofocus” theme in WordPress repository
love css-tricks want to be able to do it all, would be learning slowing a post a day
Thanks so much! i like it
It’s nice trick to use question mark, to let people know there is caption, obviously people would hover that little question mark out of curiousity, and that would reveal the caption.
Nicely formatted code. And yet I got to learn some HTML5 tricks.
Keep up with the good work.
Hey Chris,
I think i’ve stumbled across a workaround for the captions in ie….
was trying to make a workaround for ie, as it constantly displayed the caption on top…and worked well in other browsers..
so i added the following modifications to your code:
visibility: hidden; to the figcaption in css
and added
visibility:visible; to the ‘figure: hover figcaption’ in css
and it works in ie…not the same effect, but still works
just tested in ie 8, 9, safari, firefox and chrome and it works fine….
the downside is that you will lose the “?” on the image
Very nice script, I will try to implement it and see how it works. Love html5!
Hi everyone i found the solution !! It’s working on IE8 ! http://bit.ly/fveeo5
I am amazed about that effect; first time I saw this effect on phone arena, where each phone showed it’s short description.
it looks nice, and functions very well… but im still partial to HTML4 :)
Wow – I’m impressed. Very nice! BTW maybe my Drag and drop will impress you ;)
Cheers!
Such a nice effect!!
Nice! I use it on my blog and i LOVE it!
But I want to ask something. Why the caption is on the outside of the image when I make the image smaller? Is there any way that the caption can adjust by itself when I change the dimension of the image?
Thanks.
very nice
This code works great but how do you center the image?
After Inspired By This Post I Made this=>
http://google101100.blogspot.in/2013/11/cool-hover-image-effect.html
For some styling i removed the “?” with the “⇪” and but in in a box instead a circle, looks really nice!
Demo is no longer working in Firefox 29.0.1. Looks okay in MAC Chrome and Safari.