CSS - Transición automática de imágenes

   
Vista:

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
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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Transición automática de imágenes

Publicado por josemainol jmcharrogarcia@hotmail.com (1 intervención) el 08/08/2015 19:52:07
Gracias, funciona
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar