Thanks to CSS3 and better and better browser support for it, we
can accomplish things now with CSS that previously required fancy
JavaScript work. In this tutorial, I’ll walk you through fading in text
over an image on hover.
Tutorial Updated
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.
Nice, right? And look ma, no JavaScript. So let’s get started.
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.
| 1
2
3
4
5
6
7
8
9
|
<ul class="img-list">
<li>
<a href="http://nataliemac.com">
<img src="http://geekgirllife.com/images/filename.jpg" width="150" height="150" />
<span class="text-content"><span>Place Name</span></span>
</a>
</li>
...
</ul>
|
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.
| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul.img-list li {
display: inline-block;
height: 150px;
margin: 0 1em 1em 0;
position: relative;
width: 150px;
}
|
I’m setting the
width and
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
display: inline-block.
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.
| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
}
span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
|
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
<span> to
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.
| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
opacity: 0;
}
ul.img-list li:hover span.text-content {
opacity: 1;
}
|
The change I made there was to set the
opacity of the outer
<span> to
0. That will make it completely transparent. Then when the mouse is hovered over the list item, I’ll change the opacity of the
<span> to
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
transition property.
| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
|
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.
Nhận xét
Đăng nhận xét