Im making a list of contact links and am experimenting with using the :AFTER pseudo-element to insert a sprite into the same space on hover. The anchor tag has an image and I’m using the :after tag to give it the ‘hover’ image (floated left) which displays over the regular image. I set the :after image to have opacity: 0, and am using :hover:after to give it opacity: 1. It works beautifully… but the transition I’m trying to use to make it fade-in isn’t working. I’m getting an instant switch with no transition. I’ve also tried putting the background image in the :hover:after selector with a transition on the background, which also works fine, though still no transition.
Here’s my working nav demo
Anybody have a clue??
Here’s the relevant CSS or VIEWSOURCE on the above link (which has a lot of irrelevant css from the main project to preserve the over-all style)
#email
{ background: url("../images/email_icon.png") no-repeat 0 5px;
width: 30px;
height: 20px;
}
#email:after
{ content: "";
background: url("../images/email_icon.png") no-repeat 0 -18px;
float: left;
width: 30px;
height: 20px;
opacity: 0;
-o-transition: opacity 1s;
-moz-transition: opacity 1s;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
#email:hover:after
{ opacity: 1.0;
}
