<!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>
Comentarios sobre la versión: Versión 1 (1)