?
Solved

CSS 3 Transition the background image to a new image

Posted on 2011-03-14
6
Medium Priority
?
919 Views
Last Modified: 2013-11-19
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
0
Comment
Question by:ucsdmbdm
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 20

Expert Comment

by:Mark Brady
ID: 35134087
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
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 35134196
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
 

Author Comment

by:ucsdmbdm
ID: 35140925
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 42

Expert Comment

by:David S.
ID: 35141801
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
 

Author Comment

by:ucsdmbdm
ID: 35142601
Hey do u mind putting the code ?
I gave it a shot but didnt work

Thanks,
Ross
0
 
LVL 42

Accepted Solution

by:
David S. earned 2000 total points
ID: 35143117
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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Keep your audience engaged and get the most out of your next presentation with these quick Prezi tips.
Technology opened people to different means of presenting information, but PowerPoint remains to be above competition. Know why PPT still works today.
Not only does Prezi allow you to create non-linear presentations, it also makes it easy to apply transition animations between your frames. Learn how to apply a fade-in transition to select items and entire frames in this tutorial Select "Edit Path"…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

801 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question