Solved

CSS 3 Transition the background image to a new image

Posted on 2011-03-14
6
908 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 42

Expert Comment

by:David S.
Comment Utility
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
Comment Utility
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
Comment Utility
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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

Technology opened people to different means of presenting information, but PowerPoint remains to be above competition. Know why PPT still works today.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this second Micro Tutorial in the series,  viewers will learn more basic shortcuts and functions of Illustrator. In this tutorial you will learn about the eyedropper tool, zoom , ellipses and more.
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 …

763 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

6 Experts available now in Live!

Get 1:1 Help Now