CSS3 Background Position Fade Hover Effect

CSS3 Background Position Fade Hover Effect

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.

About the Author Wilma Hamlin

Wilma Hamlin is a creative designer & writer. She writes for Crayonify. Being a designer as well she use to create amazing designs using many tools. In her lesuire time she love to read books and tries to learn new designs.

Leave a Comment:

4 comments
daisopa says

nice tutorial thx!

Reply
sanjay says

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

Reply
Richard Carpenter says

@sanjay, Maybe i will :) watch this space

Reply
dezzy says

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 ?

Reply
Add Your Reply

Popular posts

css.php