CSS - Imagen, animación opacidad.

 
Vista:

Imagen, animación opacidad.

Publicado por Juan (1 intervención) el 13/03/2020 21:04:47
Hola, quisiera saber de qué forma sería posible colocar una imagen, y que al pasar el cursor encima cambie a una imagen diferentes pero con una animación de opacidad para que no se vea el cambio tan brusco.
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
Imágen de perfil de ScriptShow
Val: 571
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Imagen, animación opacidad.

Publicado por ScriptShow (125 intervenciones) el 18/03/2020 11:46:35
Saludos,

una opción posible sería:

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
28
29
30
<!DOCTYPE html>
 
<html>
<head>
<meta charset="UTF-8">
<style>
#imgs {
position:relative;
}
#imgs>img {
position:absolute;
transition:all 2s;
}
#imgs #img2 {
filter:alpha(opacity=0);
opacity:0;
}
#imgs #img2:hover {
filter:alpha(opacity=100);
opacity:1;
}
</style>
</head>
<body>
<div id="imgs">
<img src="img1.jpg" id="img1">
<img src="img2.jpg" id="img2">
</div>
</body>
</html>

P.D.: El efecto es compatible con navegadores y/o dispositivos actuales. El resto, no hace la transición.

Espero sea útil.
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