Efecto fade con una misma imagen

[Marsh2]

Hola, quisiera que me ayudaran a conseguir hacer un efecto de fade dentro de una misma imagen. La imagen cambia al pasar el mouse por encima y para evitar que la nueva imagen tardara en aparecer pues el navegador tiene que cargarla, hice el clásico truco de poner las 2 imagenes en una (una encima de la otra) pero dándole el height de una sola, y que al pasar el mouse por encima ésta adquiera background-position:bottom y así se viera la imagen de abajo. Lo que quiero hacer es darle un efecto de fade (desvanecimiento) a esta transición pero no consigo hacerlo pues todos los tutoriales que leí están hechos para 2 imágenes distintas superpuestas y yo quiero hacerlo sólo con 1.

De antemano gracias.

[perryjr]

Primeramente, vas a necesitar JavaScript. Si usas JavaScript, puedes directamente "pre-cargar" las dos imágenes:

Código Javascript:

var imagen1 = new Image('imagen1.jpg');
var imagen2 = new Image('imagen2.jpg');
 

Esto cargará las dos imágenes y las tendrá preparadas sin necesidad de usar ninguno truco de una encima de otra ni nada asi.

Segundo, usa cualquiera de los ejemplos que viste para dos imágenes con JavaScript; si te surje alguna duda en el proceso, vuelve a preguntar.

[caricatos]

Hola:

No entiendo algo... dos imágenes o una ¿?.

Si tienes una imagen encima de la otra, lo que necesitas es cambiar la opacidad de una de ellas (la de encima), desde 0 (transparente) hasta 1 (opaca) usando un temporizador (sino no se notará el efecto)...

Saludos