We are reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn more.

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.

[code type=html]
Invite Me To Dribbble
[/code]

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

[code type=css]
.dribbble {
display: block;
position: relative;
text-indent: -9999px;
width: 280px;
height: 45px;
background: url(button.png) no-repeat;
background-position: left top;
}
[/code]

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.

[code type=css]
.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;
}
[/code]

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.

[code type=css]
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;
}
[/code]

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.

Author: Tom ClaytonTom loves to write on technology, e-commerce & internet marketing. Tom has been a full-time internet marketer for two decades now, earning millions of dollars while living life on his own terms. Along the way, he’s also coached thousands of other people to success.
css.php