¿Cómo hacer que se desvanezca una imagen?

[Linton]

Quiero que al entrar en una sección de la web aparezca un foto grande, que se vaya desvaneciendo dejando ver las imágenes (thumbnails) que componen la galería de la sección.

¿Cómo podría hacerlo? Gracias, un saludo.

[Alexis88]

Supongo que buscas hacer algo como esto:



Pues, solamente necesitas utilizar keyframes y cambiar el valor de la propiedad opacity que es con la que puedes crear el efecto de desvanecimiento.

Saludos

[Linton]

¡Gracias Alexis! Pero no veo ese efecto, sino 4 imágenes fijas.

Un saludo.

[Alexis88]

Seguramente no viste el efecto desde el inicio. Dale clic a Result, espera unos segundos y verás.

[Linton]

Es lo que hice Me aparece pantalla en blanco, y luego, tras una pausa de 1 s más o menos, las 4 imágenes de golpe, sin transición.

Saludos.

[Alexis88]

Seguramente estás usando Firefox como navegador. En ese caso, actualizo el código, adaptándolo tanto a Firefox como a otros navegadores más.



Saludos

[Linton]

Aaaah ahora sí, efectivamente siempre uso Firefox. Genial, ya sólo queda ajustar parámetos

¡¡Muchas gracias, un saludote!!

PD: una cosilla más: ¿recomiendas un archivo aparte para este CSS? Quizás fuera un gazapo mío pero precisamente ayer vi con otro montaje que las reglas con keyframes interfieren en las que van a continuación.

[Linton]

Otra consulta: ¿cómo puedo hacer que la imagen grande se quede fija unos segundos y se desvanezca después?

Gracias, un saludo.

[pzin]

Usa animation-delay:

Código CSS:

animation-delay: 250ms;
 

[nosolocss]

Añádele un delay a la animación:

animation-delay:5s;
-webkit-animation-delay:5s;



Así la imagen tardara 5 segundos en volverse transparente.

[Linton]

Eso ya lo había probado, y lo que consigue es que la imagen tarde 5 segundos en aparecer y luego se desvanece igual

[Linton]

Más problemas. Aunque la imagen se desvanezca, sigue estando ahí, con lo que las fotos de la sección pueden verse pero no se puede pulsar en ellas.

De modo que se me ocurre una variante: el enlace del menú conduce a la foto grande, que tras unos segundos redirige a la sección de marras. ¿Sería posible con CSS3?

Gracias, un saludo.

[Alexis88]

Probé quitando la visibilidad de la capa una vez que la animación se complete, pero esto provocaba que la animación se corte de golpe, generando un efecto visual no muy agradable. Saliendo del tema de CSS, con el método fadeOut de jQuery, puedes darle el efecto de desvanecimiento y a la vez, ocultar la capa, con lo que las imágenes de abajo quedan libres y pueden ser afectadas por eventos. Y para aplicar un retardo en el inicio de la animación, utiliza el método delay.



Saludos

[Linton]

Muchas gracias, Alexis, tómate una cerveza bien fría a mi salud

[Linton]

¿Cómo puedo hacer que funcione en Explorer 8 este recurso? Gracias, un saludo.