There are three animations happening simultaneously when you move your mouse over each image:
- A zoom effect on the image itself, created by scaling the image up 140%
- The text and its transparent black background fading in
- The text dropping in from the top
You’re free to use all of the animations or to remove 1 or 2 of them – it all depends on how you’d like your final product to look. Let’s take a look at how to accomplish this.
1. HTML Markup
I’m going to put the images in a list, and then use the HTML5 figure and figcaption elements to hold the images and associated text:
2. CSS Styles
First up, we’ll modify the list style so that our images display side-by-side rather than in a list with bullets as they usually would. I’m going to use Eric Meyer’s reset, and then add these styles for the list of images:
We’re also setting a
height for the list items, images, captions and the paragraphs inside the captions. We position the captions over the images, but set their
0 so that they’re not visible.
3. Show text on hover
Now let’s add a bit of CSS to show the text on hover:
This just changes the
opacity of the
figcaption to 1 when the list item is hovered. Now we can see the text. This will work just fine in most browsers, even if they don’t have support for the other CSS3 tricks we’ll be adding in the next few steps.
4. Zoom the images
Now it’s time to dig into adding the animations. Let’s tackle the image zoom effect first. I mentioned earlier that this is accomplished by scaling the images up 140%. Here’s how we’ll do that:
That first selector, for
.photo-grid img was already in our CSS file. We’re just adding a CSS transition – along with the required browser prefixes. Then, we’ll add a
:hover pseudoclass and add a CSS transform to perform the scaling, with browser prefixes.
5. Drop in the text
Next, let’s tackle that dropping-in effect on the text.
Just like with the image zoom, the
.photo-grid figcaption p selector was already in our CSS. We’re just adding in the CSS transition. Then we add in a CSS transform to move the text 40px down.
6. Fade in the caption
Finally, let’s add the fading effect for the figcaption.
Here we’re adding two new CSS properties – a
transition and a
transition-delay. Because we’re zooming the image and dropping the text, we are going to wait a beat to start the fading effect so that the other animations aren’t lost in the shuffle.
And that’s it. Once again, our example is progressively enhanced. For those people who visit our page using browsers that don’t support CSS transitions or transforms yet, they’ll just see the figcaption and text appear when they hover their mouse over each image. But those who do have capable browsers get a little extra treat. And these are just the tip of the iceberg. Use your creativity to invent new animation combinations. Then share your links here so we can learn from each other!
Image credit: Moyan Brenn