sexy jquery + css image captions, easily.
i really should be working not writing up tutorials for this site, but hopefully this can be a quicky.
a few years a go I worked for a client who had a very sophisticated ui built before i got there, and they had these really sexy transparent image rollover controls. I did end up replacing the entire control breaking it out of a mess of js, to a reasonably tidy prototype/scriptaculous solution which worked great but was overly complicated.
an example of that can be seen to the right.
its a good idea to hide controls, it makes the interface much more interesting but what i took away was a love of that transparent part of the control bar and a desire to use that for captions.
I’m quite sure some super css whiz could do this entire thing without any jquery at all but the jquery gives me a reliable way to use transparency without having to worry about cross browser issues so thats the route i went for this little demo.
Our goal: create a snazzy transparent caption that sits across the bottom of an image that degrades nicely for those pesky non-js enabled browsers (as if).
What I want it to look like is this:
and, when js isn’t enabled, I want it to look like this:
so basically all the js is doing is making it transparent and shifting it up to hover over the image. simple right?
okay. the html.
we have three html elements for every image we want to wrap. A wrapper div called caption-wrap. an img element, and a span with the class caption. thats fairly simple.
the reason we need to wrap the image (and i tried other ways, believe me) is we want a fixed-with box to so the caption is the right width (even if we don’t know the image size). so lets add some styles to this bad-boy.
okay so we’ve got two styles. Caption wrap and caption. Caption wrap doesn’t need a width if you have elements around it keeping it a fixed with (like a row of images in a fixed with box) but it does have to have the position: relative. without that it won’t work.
.caption is the default caption style. which is what it will display if the js isn’t working, so you should style that to match your page before you do add the magic then you know that your bullet proof.
now we need to add some jquery magic.
what this bit of jquery is doing is finding all the elements that match the span.caption rule. then stopping any other animations that might be happening (this is wise in case you have other functions performing against those elements). then setting the opacity, then removing the class .caption and adding a new class of hover-caption.
the hover-caption class will define the look of the “hovering transparent” caption. which will only happen if the js is working, and only after we’ve set the opacity. so now we need a .hover-caption class.
that class lets you style your hovering caption to look how you want, given your layout and expected level of transparency. which is handy because you don’t want it to look the same as it would if there was no js.
thats it. your done. your finished product should look like the image above. to be extra nice, i’ve added all the files in this demo to a zip file which you can download and test out yourself.
i’m sure the code can be cleaned up, but i just want to communicate the idea to you so you can run with it. enjoy.
update: extending this idea to be on hover only.
you can pretty quickly extend this idea so captions only show up when you hover by adding making the following changes:
add display: none; to .hover-caption. this will hide the captions by default then just add a trigger to the .caption-wrap rule for hovering to trigger it. like so.
.caption-wrap:hover .hover-caption {
display: block;
}
what this does is changes the display of .hover-caption to block from none but only when you hover over .caption-wrap. nifty.
a video of the hover in action:
nifty stuff. download the files for on hover captions.
1 year ago