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
So very nice with a great explanation. – Thanks
Thanks works great.
Is it also posible for a div (not ul li)
Yes, this will work just fine with any markup.
This was such a lifesaver! The explanations were understandable and it’s a well-constructed tutorial.
Thank you so much! You’re great. 🙂
Thanks so much! This helped me out quite a bit.
This was awesome. Thanks for the tutorial!
This has helped me greatly. Thank you for taking the time to post it and layout the information in a thoughtful manner.
Nice and thanks for help. Great work.
For some strange reason, I’m having a hard time with the text becoming slightly transparent. Any suggestions?
This information exactly what I am searching for, this is really very useful for me. It is almost impossible to do this without Java script before reading your post. Thanks a lot for posting, I am going to share it.
Is it possibly to use this with a auto height rather than a fixed height? Dealing with responsive images I would like to to stay the same size as the image.
Is this possible?
Let’s try that again haha…
Is it possibly to use this with a auto height rather than a fixed height? Dealing with responsive images I would like the container to stay the same size as the image.
Is this possible?
Was trying to do this JS.
I noticed that on mobile, when I click on the image, it shows the hidden info briefly and goes on to the Flickr link automatically. Is there a way to let the user choose whether or not he wants to click through to the link? If the title is long, I want the user to be able to read the entire title before deciding whether or not he’d like to move on.
Thank you so much for this tutorial!
This is a great tutorial.
I have an Image Map: with 100 “areas”
Would like to leverage what you have here, to display a single, fixed display anywhere on the page.
When the User “hover/ mouseover” the Imagemap “areas”, the ‘title’ attribute or “id (text)” is displayed in the fixed display.
Any references / pointers would be greatly appreciated. DZ
how can i make them responsive for mobile ? please do help
There is no hover event on touch screens, so this effect doesn’t necessarily make sense for that case.
I can’t get this thing to work. First time I tried building up the code myself, but it didn’t work. The second time I tried, I copied all the code exactly like it is show in the tutorial, but yet still it doesn’t want to do what I want it to do. You can see how weird it looks on my webpage here: http://thsvvportfolio.atspace.co.uk/games/index.html
She was too busy responding to the praisers. Copied code exactly, didn’t work. C’est la vie.
Thank you so much!
You’re welcome. Thank you for taking the time to say thanks!
Hover text ,,,, Is it possible to apply slider image.??
Yes, it’s possible to apply this technique to images in a slider. The concept is exactly the same.
Great tutorial thanks! Just wondering if this can be used to hover over an image to ‘call up’ another mapped image? Cheers in advance
Great tutorial, thankyou so much for your posting, it really help me, however i’m beginner in web design….
Greeting from Indonesia..:)
Very Nice. Easy to understand and Implement. Thank you very much.
Great Tutorial…No need of JS…Thanks
What if you want this to work with circular images? I adjusted some elements so that the hover shaded area is a circle, and I have tried to add circle style elements to other sections, but the zoom in does not border on the circle. it zooms in as a square, and then corrects itself to be a circle after all the transitions/zooms
Yes, you’d have to apply a 50% border radius to both the image and the text container. Take a look at this example where I used border radius to create an example with rounded corners. Just increasing the border radius would make this work with circles as well.
Thanks for this example, it’s exactly what I’m after – however I can’t seem to get it to work with my current code… I need to add it to:
Fade-in Hover Text
How do I add this to my CSS to get it to work, please?
This is very helpful; great job. It’s exactly what I was searching for.
This was exactly what I was looking for. Your css made it extremely easy to customize for the project I am working on… http://bronsonlerma.com.
Some plugins are charging for this same effects. Thank You.
I’ve to apply it on my website that is built by foundation framework. But the width of these grids are not setting up with the default width of foundation 5. Is there any solution?
Thanks so much for this post, I used your original HTML and CSS and then made changes to make this work for a grid of responsive images.
Hi, Jack, how did you manage to sort that out for responsive grid?
Would you be nice to share your code?
Great – thanks!
Thanks for this, it was very helpful. Can I ask what figure is/does?
Here\’s a link for learning a little more about the new HTML5 figure element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure
It works, but my image isn’t aligned with the border, what should I do? Thanks in advance!
i wanna display the images in a circle.. what changes should be made??
Thank you so much for the help. I am going to use it on my personal website for demo projects
This was a GREAT tutorial! I am new to Front End Development and this helped a lot. Thank you for posting!
Loving your work nataliemac! If i need the text in from the start can it be separated from the transparent black background? Any pointer in the right direction would be much appreciated…
Great Help. Please keep posting like this interesting article. Thanks a lot………..
Thank you for posting – this is great!
Hi Natalie, thanks for posting and sharing this with us. However….none of your code on the article is showing up for me. It’s showing up when I inspect the element of the page, so I know it exists, but it doesn’t show through on the actual site. Any chance of fixing this?
It’s fixed now. Thanks for letting me know. 🙂
I’m very new to HTML and trying to edit the script to have a zoom/text of the countries i’ve visited.
My other images are set at W:461 H:333.
However when I try to amend the html for the effect the size becomes much smaller and the text effect is on the left.
This has been wonderfully helpful. I was trying to get a simple text-over effect without resorting to bloody jquery or scripts. Thank you.
Hi as i was working on some caption image hover effects, found very useful for me it helped me.
thank you so much……awsome…..best solution
Image coming out of the box, please help
Thanks a ton! It really transformed a page from text-based links to wonderful animated ones. I use google-sites, and had to do a lot of tinkering to get the transform to work properly. The other annoyance, not sure if it is Google Sites, is that each of the link opens in its new window… not sure how to force it to open in the same. If you know, please shoot a reply, else, I will keep tinkering.
Can you please advise on how to make images responsive? Excellent post, thank you!
Hello i tried to implement this and it worked beautifully.
Yet i have one question how to align images horizontally i.e in a one line? One after other and so on.
For your info, this does not work on Firefox (43.0.4). Text is vertically at the top and image does not zoom.
Martin, what a great opportunity for you to develop a fork, huh?
thaks a lot for the code!!
I’m trying to make the images a little bit bigger. But somwhow it’s not working. Can you please explain me what values I habe to change?
Thanks and regards
Thanks for great help ! Ill follow your blog for later, thank you 🙂
Thank you so MUCH for your solution, YOU ARE A GODSEND! I’ve been learning how to code on my own, but the biggest trouble I have run into while entering this realm is being able to proper solutions to my problems since everyone has a different solution and a different design they want to accomplish.
how can i center image inside a thumbnail container on bootstrap
how do i get the fancybox to open the image on the hover. it does not work
Excellent work Natalie MacLees thanks,
but its working fine in big screens but not working as expected in mobile phones can you please tell me the way i can solve the issue.
Thanks for sharing this splendid image caption technique! Worked like a charm for me, including responsiveness on smaller screens. You’re awesome. 🙂
Small world Natalie! Tutored with your class a few weeks back in LA. Great content – thank you for the great description!
So Good !! thx.
Thanks for the great tutorial. Made my uni assignment a lot easier
This code really helped me a lot. Thank you very much 🙂
This helped me a lot. Thank you.
Wonderful tutorial …Thanks a ton
I just recommend to change the ‘li:hover’ into a ‘figure:hover’ 🙂
Thank you so much!
Wow! This is a fantastic resource. Thanks for the article.
Thank you very much for the tutorial. Very well done and helpful!
THanks for the tutorial, but I can’t make it work..
The effect doesn’t work at all on my page, even though I followed all the steps…
Do you know what could be the issue ?