Solved

CSS 3 Transition the background image to a new image

Posted on 2011-03-14
6
911 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
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
ScreenConnect 6.0 Free Trial

Check out the updates in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI that improves session organization and overall user experience. See the enhancements for yourself!

 
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 500 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

Complete VMware vSphere® ESX(i) & Hyper-V Backup

Capture your entire system, including the host, with patented disk imaging integrated with VMware VADP / Microsoft VSS and RCT. RTOs is as low as 15 seconds with Acronis Active Restore™. You can enjoy unlimited P2V/V2V migrations from any source (even from a different hypervisor)

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
help squeezing some space out in this site 9 34
Looking for magnifying glass wingding font 3 17
Location of Buttons 4 15
div to fit another div 8 23
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Many programs have tried to outwit PowerPoint in terms of technology and skill. These programs, however, still lack several characteristics that PowerPoint has possessed from the start. Here's why PowerPoint replacements won't entirely work for desi…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
In addition to being a great web-based presentation tool, Prezi also makes it easy to save your presentation as a PDF to share with others as well. Learn how in this tutorial. Select the share icon from the top menu in your Prezi editor: Select "D…

809 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