<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#imagen { position:relative;
}
#imagen>img { position:absolute;
}
#imagen #img2 { animation: fadeIn 2s
}
#imagen #img2:hover { animation: fadeOut 2s
}
@keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }
@keyframes fadeOut { from {opacity: 1;} to {opacity: 0;} }
</style>
</head>
<body>
<h2>Poner el cursor encima de la imagen para cambiarla con animación</h2>
<div id="imagen">
<img src="img1.jpg">
<img src="img2.jpg" id="img2">
</div>
</body>
</html>
Crear cuenta
Comentarios sobre la versión: Versión 1 (1)