Seguro que has visto este efecto en muchas ocasiones y la verdad es que es muy sencillo y además hay varias formas de hacerlo, la más habitual o al menos la más sencilla en cuanto al código que hay que usar es poner la imagen como fondo de algún elemento, por ejemplo un div, y poner la otra imagen de fondo cuando se pase el ratón por encima.
Con crear un div con el id por ejemplo imagen-cambiante y el siguiente CSS ya esta listo.
#imagen-cambiante {
min-height: 290px;
min-width: 290px;
background: url(http://programandoointentandolo.com/ejemplos/imagenes/cubo/img1.png) no-repeat;
}
#imagen-cambiante:hover {
background: url(http://programandoointentandolo.com/ejemplos/imagenes/cubo/img6.png) no-repeat;
}
Muy sencillo, pero quizás no demasiado satisfactorio porque el intercambio de imágenes se hace muy bruscamente y con las animaciones de CSS3 podemos conseguir un resultado mucho más logrado, y aunque no será tan sencillo como el ejemplo anterior seguirá siendo bastante simple.
Para poder hacer una animación tiene que haber alguna propiedad que podamos animar y como lo que queremos es cambiar una imagen al pasar el ratón por encima la opción más sencilla es que las 2 imágenes estuviesen superpuestas y que al pasar el ratón por encima hagamos la imagen que esta puesta encima «invisible» para poder ver la de debajo y de este modo podemos cambiar entre dos imágenes al pasar el ratón por encima y además hacerlo con una transición suave.
See the Pen Cambiar imagenes onmouseover by Ivan Salas (@isc7) on CodePen.
En la pestaña HTML puedes ver que el código HTML necesario es un div y las 2 imágenes que se quieren mostrar y que la segunda imagen tiene una clase para poder hacerla invisible y si miras la pestaña CSS podrás ver que las imágenes tienen un posicionamiento absoluto para que puedan estar colocadas una delante de la otra y por eso necesitamos el div contenedor con un posicionamiento relativo para que el posicionamiento absoluto sea sobre este div y podamos colocar las imágenes en cualquier lugar de nuestra web sin necesidad de volvernos locos.
Y para conseguir que aparezca una imagen mientras esta desapareciendo la otra pues solamente es necesario poner la opacidad a 0 de la imagen que esta encima (la que tiene la clase top) y para que el intercambio sea suave se define la transición de la opacidad con el tiempo y el efecto que más nos guste y ya tenemos unas imágenes que se intercambian al pasar el ratón por encima de ellas usando simplemente CSS y además de forma animada gracias a las transiciones de CSS3.
Finalmente, como de costumbre si quieres puedes descargarte el código del ejemplo completo desde el siguiente enlace.
