Using CSS Transitions to Create Image Overlays

Today we are going to look at how to replicate the beautiful image overlays, also called caption animations, created by the jQuery plugin Mosaic with just CSS transitions. No JavaScript at all.

Using CSS Transitions to Create Image Overlays: Demo

Arguably the most important part of a tutorial is the demo. So without any further dilly-dallying here is the demo.

Now another small note. My CSS has the various browser prefixes (-ms-, -o-, -webkit-, -o-) missing as the demo uses the Prefixfree JS library. Please either use Prefixfree or add them in as you need them.

The HTML

I wanted to avoid JavaScript completely here so I’ve tried my best to keep the HTML as simple as possible, however it is obviously going to be more complicated than a simple image, or if JavaScript were creating some of the markup. Anyway, let’s just take a look. Observant visitors may notice the demo has more markup. Don’t panic. That extra code is just used for centering the demo.

I thought now would be a good time to start using HTML 5 elements so I’ve broke out the figure and figcaption tags. A figure tag is used to outline a photo on a webpage. The figcaption is used inside the figure tag to outline the photo’s caption. Pretty obvious, right!

That’s all the HTML you need. Obviously you just need to change the images & text content. I am just using some photos I took from my local Summer Festival that I visited Yesterday.

The CSS

Now onto the meaty part. The CSS. I’ve been using JavaScript for transitions & animations for so long it feels weird to say there is no JavaScript, but it’s true.

First let’s setup some default styling.

Here we are just setting background colors, making our container (to center my demo) and clearing margins/paddings on some elements. I would use a normalize or a reset for full projects, but since I’m using a limited range of elements in this tutorial I didn’t see the point. We also set our box-sizing to border-box to eliminate the need for any padding minus width math.

Now let’s get to the main CSS. First we need to style the li & the img.

Here we set our li to relative. We do this so our caption, which will be absolute, will be positioned from each item’s boundary instead of the document’s. We also set set overflow to be hidden. We do this to stop our caption being visible when it is moved away from the image.

To bring focus away from the image and onto the caption we’d like to fade out our image. To do this we set our li‘s background color to black. Now we give our image a transition (remember you need to add the prefixes if you aren’t using prefix-free) and then add a hover to the li that reduces the images opacity. It is important to note that you need to use the li‘s hover since the image will be covered by the figcaption, which means you are actually hovering over the li and not the image. If you don’t use the li it will cause some freaky (but slightly hilarious) transition looping.

Now I have created two slightly different styles of transitions so here is the first.

Transition Style 1

I’m going to break the transition’s code into sections & go through them one at a time instead of all at once. Ready? Good.

First up is our figcaption. We position it absolute, make it block, set it’s width & height to be 100% of it’s parent (figure), set it’s top position to 0 (just to be sure), bump it’s index up to 1 and translate (move) its height up. We also give it a transition so that it will animate. The rest is just text styling to make the demo look semi-pretty, feel free to use it if you wish.

Why do we use translate to move our caption up? Well because it allows us to move the caption out of sight while leveraging the much smoother transition performance translate provides over position. This obviously helps make it look shiny (Browncoat reference for y’all).

Next we have the contents of said caption.

I’ve grabbed a few CSS rules this time since they are only small. These are just styles for our caption, again alter as you see fit. Do note, however, the use of an extra selector on the last two CSS rules. These are to style our second style of transition so keep them in there if you want to use that one too.

Next up is a simple one:

This pushes our figcaption back into view when the li that contains our image is hovered and because of the transition property it animates in smoothly.

Believe it or not, that’s it. You are all done. What to see another style of transition? Then read on.

Transition Style 2

To make this easy I’ve used the previous styles and then added an additional class to override certain styles and alter the transition slightly. In this case that class is alt and it should be added to the figcaption. Here are the CSS rules you’ll need:

That’s it. All we are doing is giving our caption a background color, a faint shadow and changing it’s transition so it moves in from the left by using translateX. The hover rule is the same, but again using tanslateX. The final rule is just some styling for a button to allow you to click through to whatever the target may be. The reason for this is that this style of caption doesn’t make the entire caption area a hyperlink. To do that I changed the markup ever so slightly. Here is the new HTML from inside the figcaption.

Remember that is just the code from inside the figcaption.

The Fallback

So you may be thinking. What about Internet Explorer 9 and lower. Well I would strongly advise anyone using those browsers to upgrade, but I understand that some clients will require you to support them. To do that you have to go back to the good old realm of jQuery I’m afraid. Either use this handy Gist by Jonraasch to extend $.support with the $.support.transition property in jQuery or if you need more than just transition detection try Modernizr. You can then use a simple conditional to see if transitions are supported & if not, fall back to jQuery based animation.

Images used in this tutorial are my own personal photos. You may use them, if you wish, according to the license set out on my Flickr account (normally CC BY-NC).

CSSHTMLMosaicTransformTransition