CSS Fade Between Background Images on Hover

Question

Is there a way I can do the following?

I have a transparent png sprite that shows the standard image on the left, and the image for the state: hover on the right.

Is there any way that the image can disappear from the left image into the desired image: hover using only css3 transitions? I tried the following, but it does not work:

li{-webkit-transition:all 0.5s linear; -moz-transition:all 0.5s linear; -o-transition:all 0.5s linear; transition:all 0.5s linear;} li{background:url(/img/sprites.png) 0 -50px no-repeat;} li:hover{background:url(/img/sprites.png) 0 -150px no-repeat;} 

Now the above makes an animated background, it moves the image across. What I would like instead of a pan is the effect of attenuation or dissolution.

UPDATE: I had to create two elements and just animate the opacity separately. This is a bit dirty because I have to specify the exact fields of each element, but I think it will work. Thanks for helping everyone :)

Answer 1

Latest news on this topic:

Chrome 19 and later support background images:

Demo: http://dabblet.com/gist/1991345

Additional information: http://oli.jp/2010/css-animatable-properties/

Answer 2

You did not provide any code for the actual conversion.

http://css3.bradshawenterprises.com/cfimg1/

Try this in hover style:

 -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; 

Answer 3

Take a look at this: http://jsfiddle.net/j5brM/1/

I think this fits all your needs and it is a little less complicated.

Answer 4

I don’t think you can only change the opacity of the background images in CSS, so if you don’t have two separate elements for the background image (one for each position of the sprite) and change the opacity of both of them on hover, I think you’re stuck .

Answer 5

 li{background:url(/img/sprites.png) 0 -50px no-repeat; background:rgba(80, 125, 200, 0.55);} li:hover{background:url(/img/sprites.png) 0 -150px no-repeat; background:rgba(100, 125, 175, 0);} 

it should be

 li{background:url(/img/sprites.png) 0 -50px no-repeat; background-color:rgba(80, 125, 200, 0.55);} li:hover{background:url(/img/sprites.png) 0 -150px no-repeat; background-color:rgba(100, 125, 175, 0);} 

not sure if this corrects or not though.

Answer 6

I know it may be late. But I struggled with the same problem for a long time. Also, many solutions do not work with transparent sprites.

What i did is

HTML

 <div class="sprite-one"> <span class="foo"></span><span class="zen"></span> </div> 

CSS

 .sprite-one { height: 50px width: 50px } .sprite-one span { width: 50px; height: 50px; display: block; position: absolute; } .foo, .zen { background-image: url(sprites.png) no-repeat; -webkit-transition: opacity .6s ease-in-out; -moz-transition: opacity .6s ease-in-out; -o-transition: opacity .6s ease-in-out; transition: opacity .6s ease-in-out; } .foo { background-position: 0 0; opacity: 1; } .zen { background-position: -50px 0; opacity: 0; } .sprite-one:hover .foo { opacity: 0; } .sprite-one:hover .zen { opacity: 1; } 

This is a pure css method and encodes a bit ... but it seems the only way to achieve the desired effect! I hope that people who also stumble on this can find some help from this!

Answer 7

 <li class="image transition"></li> css: .image{ background-image: url("some/file/path.png"); background-repeat: no-repeat; width: XXpx; height: XXpx; background-position: center center; background-size: cover; } /* DRY */ .transition{ transition: background 0.6s; -webkit-transition: background 0.6s; } .image:hover{ background-image: url("some/file/path_hoverImage.png"); } 

Answer 8

CSS: -

li {background: url ( http://oakdale.squaresystem.co.uk/images/solutions.png ) no-repeat left center; background-size: 89px; padding: 54px 0 54px 130px; webkit transition: all 0.5s are linear; -mosaic transition: all 0.5s are linear; -o-transition: all 0.5s are linear; transition: all 0.5s are linear; }

li: hover {background size: 50 pixels}