Transición automática de imágenes
Publicado por Lydia (1 intervención) el 27/09/2014 02:22:01
Hola tengo el siguiente código que al pasar el ratón sobre una imagen, hace se vea otra con un efecto muy bonito de desvanecer.
HTML
CSS
Pues bien, estoy diseñando una web y me gustaría que la imagen de cabecera de la página vaya cambiando cada X segundos con ese efecto de desvanecimiento, pero no tengo de como se hace. ¿Alguien podría ayudarme?
Muchas gracias por la ayuda
HTML
1
2
3
4
<div id="animacion">
<img class="novisible" src="images/imagen1.jpg" >
<img class="visible" src="images/imagen2.jpg" >
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#animacion{padding:0;
margin:0 auto; height: 364px;width: 960px;}
#animacion img{ position:absolute;
top: 0;-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;}
#animacion img.novisible{
opacity:0;filter:alpha(opacity=0);}
#animacion:hover img.novisible{
opacity:1;filter:alpha(opacity=100);}
#animacion:hover img.visible {
opacity:0;filter:alpha(opacity=0);}
#animacion img.visible:hover {
opacity:0;filter:alpha(opacity=0);}
Pues bien, estoy diseñando una web y me gustaría que la imagen de cabecera de la página vaya cambiando cada X segundos con ese efecto de desvanecimiento, pero no tengo de como se hace. ¿Alguien podría ayudarme?
Muchas gracias por la ayuda
Valora esta pregunta
0