asked on

CSS 3 Transition the background image to a new image

Hi,
I would like to use the CSS 3 transition to change the background image from logo to logo:hover but for some reason it keeps on jumping and not showing the smooth transition.
I other words, I would like the logo,gif fades out and logo_hover.gif fades in.

#logo a{
background: url("./../media/images/logo.gif") no-repeat;
      width:280px;
      height:80px;
      float:left;
}
#logo a:hover {
background: url("./../media/images/logo_hover.gif") no-repeat;
      width:280px;
      height:80px;
      float:left;

}

Thanks,
Ross

Mark Brady

Try adding this to each of the above styles

-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;

hopefuly that should show a transition but not in IE and not in old version of FF. There is nothing that can show transitions/animations in aLL browsers yet.

Designbyonyx

You have to use a trick which is explained here:

http://www.mightymeta.co.uk/fading-button-background-images-with-css3-transitions/

This gracefully degrades in IE to standard hard-switch hover.

ucsdmbdm

ASKER

Hey guys,

Thanks for getting back to me.
I tried the transition all both on the hover and the actual image but as soon as I hover, it shows the end result image. I would like to fade in to the new image.

Please check out the dot the logo.
http://faraz.ucsd.edu/test.php
Thankls

David S.

At least in Firefox 4, background images can not have animated transitions (https://developer.mozilla.org/en/CSS/CSS_transitions#section_3).

What I would do is give the hover image to "#logo a" and add an <img> inside it for the regular image and then animate the opacity of the inner (<img>) element.

ucsdmbdm

ASKER

Hey do u mind putting the code ?
I gave it a shot but didnt work

Thanks,
Ross

ASKER CERTIFIED SOLUTION

David S.

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial