CSS fundido entre las imágenes de fondo Al pasar por encima

Question

¿Hay alguna manera de que yo pueda hacer lo siguiente?

que tienen un sprite png transparente que muestra una imagen estándar de la izquierda, y una imagen para el estado: hover a la derecha.

¿Hay una manera que puedo tener el fundido de imagen de la imagen de la izquierda en la imagen a la derecha en: flotar usando sólo las transiciones CSS3? He intentado lo siguiente, pero no funciona:

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;} 

Ahora, el anterior animar el fondo, se filtra a través de la imagen. Lo que me gustaría en lugar de una sartén es un efecto de desvanecimiento o disolución.

ACTUALIZACIÓN: Terminé teniendo que crear dos elementos y simplemente animar las opacidades por separado. Es un poco complicado porque tengo que especificar los márgenes exactos de cada elemento, pero supongo que va a trabajar. Gracias por everyones ayuda :)

Answer 1

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);} 

debería ser

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);} 

no está seguro de si se ha solucionado o no sin embargo.

Answer 2

No ha especificado ningún código para hacer la transición.

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

Trate de hacer esto en su estilo de vuelo estacionario:

-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

Tome un vistazo a esto: http://jsfiddle.net/j5brM/1/

Creo que este se adapte a todas sus necesidades y es un poco menos complicado.

Answer 4

No creo que pueda cambiar la opacidad de solo imágenes de fondo en CSS, a menos que tenga dos elementos separados para la imagen de fondo (uno para cada posición del sprite) y cambie la opacidad de ambos en flotar, creo que estás atascado.

Answer 5

Las últimas noticias sobre este tema:

Chrome 19 y más nuevos soportes Imagen de fondo transiciones:

Demostración: http://dabblet.com/gist/1991345

Otros detalles: http://oli.jp/2010/css-animatable-properties/

Answer 6

Sé que esto puede ser un poco tarde Pero estuve luchando con el mismo problema durante mucho tiempo. También con sprites transparentes muchas soluciones no parecen funcionar.

Lo que hice es esta

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; 
} 

Esta es una forma pura css & tiene un poco de una gran cantidad de codificación .. ¡pero parece ser la única forma en que logré el efecto deseado! ¡Espero que las personas que también tropiezan con esto puedan encontrar algo de ayuda a partir de esto!

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 izquierdo y central; fondo de tamaño: 89px; relleno: 54px 0 54px 130px; webkit-transition: todos 0.5s lineales; -moz-transition: todos 0.5s lineales; -o-transition: todos 0.5s lineales; transición: todos 0.5s lineales; }

li: hover { fondo-size: 50px}