CSS3 Background Position Fade Hover Effect

Good evening everybody, in today’s tutorial I’ll be showing you how to animate the background position in CSS using a cool CSS3 fade effect.

In Blog, HTML & CSS

About The Effect

The effect is a nice subtle fade effect, fading from one background position to another. An effect like this is normally achieved using jQuery, but with CSS3 it will soon be the norm.

The Mark-Up

Lets take a look at the simple mark-up.

1
<a class="dribbble" href="http://dribbble.com/richard_carpenter" target="_blank"><span>Invite Me To Dribbble</span></a>

Nothing special, just your average looking anchor tag. Notice the text within the anchor tag is wrapped inside a span tag. Why? i hear you ask… well the span tag will be used to target the hover effect of our button. Lets take a look how we style the anchor tag up.

The CSS

1
2
3
4
5
6
7
8
9
.dribbble {
    display: block;
    position: relative;
    text-indent: -9999px;
    width: 280px;
    height: 45px;
    background: url(button.png) no-repeat;
    background-position: left top;
}

We style our anchor tag up using a sprite image as our background (which i create previously). The important attribute here to remember is the position, positioning our button relative will allow us to absolutely position our span tag.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.dribbble span {
    position: absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background: url(button.png) no-repeat;
    background-position: left bottom;
    
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
}
.dribbble:hover span {
    opacity: 1;
}

For our span tag we position it absolutely over the top only this time changing the background position of our sprite to the hover state. We then hide the button using the CSS3 opacity property.

We then set the hover state but target the span tags opacity, setting this back to 100% completes the effect.

Try The Demo

Transition Text

While were on the topic of CSS3 transitions, why not try adding a transition to your text links.

1
2
3
4
5
6
7
8
9
10
11
a {
    text-decoration:none;
    color:black;
    -webkit-transition:color .3s ease-in;
    -moz-transition:color .3s ease-in;
    -o-transition:color .3s ease-in;
    transition:color .3s ease-in;
}
a:hover {
    color:#999;
}

Try The Demo

Conclusion

Thanks for taking part in this code snippet, if you have any questions feel free to post them up on our Facebook Fan Page Or Tweet them via twitter @photoshop_plus.

  1. September 25, 2012 at 4:24 AM

    nice tutorial thx!

  2. September 26, 2012 at 12:39 PM

    Cool tutorial Richard, maybe you should create a tut for the button used. That would be cool!

  3. Wilma Hamlin
    September 27, 2012 at 6:46 PM

    @sanjay, Maybe i will :) watch this space

  4. dezzy
    October 4, 2012 at 6:15 AM

    Hi Richard so far you are The Best at the moment i’m new around here Richard i wish like to create a web site like facebook with a new futuristic face could you help me please ?

Give Us Your Feedback

Here on Photoshop Plus we use something called Gravatar, its a little image which will appear next to your name when you comment on a blog. Using a gravatar will help us recognise genuine comments from the spam comments.


Don't forget to leave a comment on this post, we appreciated your feedback good or bad.

There's currently 4 Comments On CSS3 Background Position Fade Hover Effect, why not add yours!

Leave a Reply

Your email address will not be published. Required fields are marked *

Auto Scroll To The Top
css.php