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
ucsdmbdmAsked:
Who is Participating?
 
David S.Commented:
This worked for me in Firefox 4.
<div id="logo"><a href="#"><img src="/media/images/logo.gif" alt="IntelliSurvey" /></a></div

Open in new window

#logo a {
	background: url("../media/images/logo_hover.gif") no-repeat;
	width:280px; 
	height:80px;
	float:left;	
}
#logo img,
#logo a:hover img {
	opacity: 0;
	-webkit-transition: opacity 3s ease-in-out;
	-moz-transition: opacity 3s ease-in-out;
	-o-transition: opacity 3s ease-in-out;
	transition: opacity 3s ease-in-out;
}
#logo img {
	opacity: 1;
}

Open in new window

0
 
Mark BradyPrincipal Data EngineerCommented:
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.
0
 
DesignbyonyxCommented:
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.
0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

 
ucsdmbdmAuthor Commented:
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
0
 
David S.Commented:
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.
0
 
ucsdmbdmAuthor Commented:
Hey do u mind putting the code ?
I gave it a shot but didnt work

Thanks,
Ross
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.