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.
Muchas gracias me sirvió mucho!
gracias por compartir
Hola que tal buenas alguien sabe como hacer que la imagen quede en medio de la web?
oye bro eso hace que si quieres poner mas imagenes seguidas se superponen una encia de la otra
Claro es lo que se pretende 😉, es por que se estan posicionado de forma absoluta las imagenes dentro de la clase contenedor .contenedor img { position: absolute; }.
Si quieres poner más imagenes que repitan el mismo efecto o que no hagan nada las tienes que poner fuera de la clase .contenedor o dentro de otro div .contenedor distinto.
Hola.
Gracias por tu esfuerzo en compartir tus conocimientos.
Yo estoy intentando hacer una galeria de imagenes en la que habran 15 o 20 imagenes una tras otra y cada una de ellas tendra una imagen diferente al poner el raton encima.
Sin embargo noto que con este codigo no es posible porque todas se colocan una encima de otra y si pongo a flotar a la izquierda el contenedor tampoco funciona. Ademas de esto, no se si se pueda hacer que las imagenes sean al 100% para que al verse en un telefono se adapten al tamaño.
Saludos.
Cada grupo de imagenes tiene que estar dentro de un contenedor distinto, simplemente crea tantos como quieras para conseguir una galeria, he añadido una segunda imagen al ejemplo para que veas que si se puede.
Respecto a lo de los tamaños para eso hay que sustituir los valores en pixel por alguna unidad relativa o usar imagenes resonsive http://programandoointentandolo.com/2017/11/imagenes-responsive-html-y-css.html
Se ve perfecto pero el problema ocurre cuando se pretende poner el alto del contenedor height: auto;
Es decir, tener imágenes de 290 px con alto auto.
Si le pones width:100% a .contenedor img y el height: auto; a .contenedor funciona bien si la imagen de fondo y la superpuesta tienen el mismo alto, pero si las 2 imagenes tienen un alto distinto no queda bien, para solucionarlo se podría crear otro div adicional para cada imagen con un color de fondo y hay que darle una vuelta para que se queden las imagenes centradas verticalmente