Trying to apply transition effect to hover

Question

My CSS:

a:hover {
    position: relative;
}
a:hover:after {
    z-index: -1;
    content: url(icon.jpg);
    display: block;
    position: absolute;
    left: 0px;
    bottom: 20px;
}

This displays an icon when I hover over an anchor, from this post: Make image appear on link hover css

I am trying to apply this:

-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;

So that the image fades in, but I cant get it to work.

Answer 1

WebKit (Chrome, Safari) does not support transitions on pseudo elements. It should work in Firefox.

see this q/a

To accomplish your need you could apply the background image for the link and in hover you could apply the transition by setting the background-position. You can also use an extra span inside the a tag instead of using :before pseudo class.

Answer 2

You could do a background image.

a {
   -webkit-transition: all 0.3s ease-in;
   -moz-transition: all 0.3s ease-in;
   -o-transition: all 0.3s ease-in;
}
a:hover {
    position: relative;
    background:url(icon.jpg); 
}

The code is just an example, you would need to position the background image as well, since I dont know the dimensions of your design I can't tell you the exact position.

Answer 3

Webkit currently support transitions and animations

http://css-tricks.com/transitions-and-animations-on-css-generated-content/

a:hover {
    position: relative;
}
a:after{
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
       transition: all 0.3s ease-in; /*never forget the standard*/
}
a:hover:after {
    z-index: -1;
    content: url(icon.jpg);
    display: block;
    position: absolute;
    left: 0px;
    bottom: 20px;
}

And the example used before:

http://jsfiddle.net/d2KrC/88/

The example using image

http://jsfiddle.net/d2KrC/92/

Answer 4

There are some css "tricks" that can help you, maybe using css keyframes, but the best way to perform this in a compatibility way is using jQuery (a jquery version that matches your compat needs). As some people asked you on css, where webkit actually support this kind of transitions, and this question could grow if we start talking on standards, the best you can do at first is update all your browsers and check.

If you need or want to keep compat on older browser versions, you'll need to catch the hover event with javascript and then do whatever you want (as javascript can work directly with the DOM) and with CSS is pre-loaded and the most you can do is change the properties. ie load image with display: none, then change this property with an event.

example on jquery:

 $('.link').click(function(){ $('.foo').fadeIn(); }); $('.link2').click(function(){ $('.foo2').fadeToggle(); if($('.link2').text() == 'show or hide') $('.link2').text('click again'); else $('.link2').text('show or hide'); }); 

 .foo, .foo2{display: none; width: 100px; height: auto;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> <img class="foo" src="http://joelbonetr.com/images/root.jpg" alt=""> <a class="link" href="#">show it!</a> </p> <p> <img class="foo2" src="http://joelbonetr.com/images/root.jpg" alt=""> <a class="link2" href="#">show or hide</a> </p>