Solved

CSS 3 Transition the background image to a new image

Posted on 2011-03-14
6
909 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Add visuals to your Prezi to keep your audience engaged. Learn how to embed images, edit them, and more in this video micro tutorial. Select "Insert" from the top menu in your Prezi editor: Select "Image": A toolbar will pop in from the right …

863 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

Need Help in Real-Time?

Connect with top rated Experts

28 Experts available now in Live!

Get 1:1 Help Now