The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS stuck on a :hover transition opacity issue

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #34209

    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)

    { background: url("../images/email_icon.png") no-repeat 0 5px;
    width: 30px;
    height: 20px;
    { 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;
    { opacity: 1.0;

    transitions don’t work on pseudo elements


    In webkit it does not (as of yet). Firefox, it works.


    What they said.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.