I updated this tutorial to show you how to take advantage of even more CSS3 properties. The update is available here.
Here’s a sample of what we’ll be creating:
If you move your mouse over those images, you’ll see some text fade in that tells you where each photo was taken. When you move your mouse away, the text fades away.
Step 1: HTML Markup
To keep things neat and tidy, I’m going to put my images in a list. Each list item will contain an image and a couple of nested
<span>‘s to hold the text that should appear when my site visitors hover over the images. Then I’ll wrap all of that in a link.
I’d just repeat that list item and everything inside of it for each image that I wanted to include.
Step 2: Style the Images
Now that we’ve got the markup out of the way, let’s jump into the CSS. First up, we want to get rid of the bullets and line our images up across the page.
I’m setting the
height of each list item to the width and height of my individual images, and then lining up the list items by setting them to
Step 3: Place the text over the images
Now we’ll take that text description for each image and place it on top of the image.
There’s a few handy techniques here I’d like to draw attention to. First up, that
rgba color I’m using for the background of the outer span. That will allow me to make my background color partially transparent by specifying an alpha value in addition to values for red, green, and blue. In this case I’m setting the background color to 50% transparent black.
Next up, I’ve set that inner
display: table-cell. That lets me use the
vertical-align attribute to place my text right in the middle of the image. If you’ve worked with CSS for any length of time, then you know that vertically-aligning anything to be in the middle of a container is pretty darn tough. This is a pretty straightforward solution that works without a lot of weird workarounds. It will work pretty nicely cross-browser, but be aware that it will not work in IE8 or any earlier version of IE.
Step 4: Show the text on hover
Now I only want to show that text when the mouse is over the image. We just have to make a couple of quick additions to the CSS file.
The change I made there was to set the
opacity of the outer
0. That will make it completely transparent. Then when the mouse is hovered over the list item, I’ll change the opacity of the
1, making it fully opaque.
Step 5: Add the animation
It’s looking good so far, but we’re missing the animation. Well, you’ll be glad to know that’s it’s very simple to add that in. We just have to use the new CSS3
Unfortunately, just now, we still have to include several lines that include the browser prefixes for the transition property, but in time that will shrink to just one line. We just specify which property we want to animate,
opacity in this case, and then how long the animation should take.
There are some additional options we have, for example adding easing to the animation. If you’re interested in digging into CSS transitions a bit more, I recommend taking a look at Chris Coyier’s CSS Tricks article that explains transitions in detail.
This is also a great example of progressive enhancement – site visitors with browsers that have support for CSS3 will see the nice animation. But those who have older browsers that don’t support CSS3 transitions yet will still be able to see the plain hover effect, just as it appeared after Step 4, before we added the transition property.
And that wraps it up. That wasn’t so hard, was it? Have some fun experimenting with adding different CSS transitions – you can accomplish some really nice effects – like animating the color changes on menu items and links. Post a link here to what you’ve built so we can all see and learn from one another.