Breaking

Post Top Ad

Your Ad Spot

domingo, 10 de marzo de 2019

Cambiar entre dos imágenes al pasar el raton por encima con css

Esto es una reedición de un post en mi otro blog (http://caosmental.com) donde subo fotos de mi gato y escribo sobre otras cosas, como por ejemplo mi otra pasión, la escritura 🙂  Como tiene muchas visitas he pensado que es mejor mantenerlo aquí junto con los demás recursos.
Este “efecto” lo conocerá ya mucha gente. Es muy simple de hacer y da mucho dinamismo a las páginas,  yo lo uso en casi todas las que hago.
Simplemente es hacer que cuando el ratón esté encima de una imagen esta cambie a otra, volviendo a la anterior cuando dejamos de tener el ratón encima.
Es muy útil para iluminar botones antes de presionarlos y llamar la atención sobre ellos. Un ejemplo se puede ver en los botones de la página principal de esta misma web.
No tenemos más que crear en nuestro CSS una etiqueta con el nombre que queramos y decir cual es la imagen y cuales sus medidas (imagen1.jpg):
#imagen {
background: url(ruta a la imagen/imagen1.jpg) no-repeat;
height: (alto)px;
width: (ancho)px;
}
view rawgistfile1.css hosted with ❤ by GitHub
Luego, tenemos que hacer otra etiqueta, en realidad la misma pero con el atributo :hover, que nos diga cual es la imagen que debe aparecer cuando el ratón esté encima (imagen2.jpg):
#imagen:hover {
background: url(ruta_a_la_imagen/imagen2.jpg) no-repeat;
height: (alto)px;
width: (ancho)px;
}
view rawgistfile2.css hosted with ❤ by GitHub
Luego no tendríamos más que llamar con un <div> (por ejemplo) a la etiqueta imagen.
El problema de esto es que hasta que carga, la imagen2 no aparece, por lo que aparece como un parpadeo. Para evitar esto podemos o bien precagar las imágenes antes, o usar el truco que voy a explicar ahora.
No hay más que unir las dos imágenes que queramos en una sola, por ejemplo la imagen1 a la izquierda y la imagen2 a la derecha, una detrás de otra y guardadas en la misma imagen (imagen1y2.jpg). Entonces en nuestra css ponemos lo siguiente:
#imagen {
background: url(ruta_a_la_imagen/imagen1y2.jpg) no-repeat left;
height: (alto)px; //el alto original de la imagen1
width: (ancho)px; //el ancho original de la imagen1
}
#imagen:hover {
background-position: right
height: (alto)px; //el alto original de la imagen2
width: (ancho)px; //el ancho original de la imagen2
}
view rawgistfile3.css hosted with ❤ by GitHub
Con esto le hemos dicho que el fondo es la imagen1y2.jpg, entonces empieza a poner la imagen de fondo desde la derecha, pero como le hemos puesto que la anchura del div (o lo que sea) es igual al de la imagen1, el resultado es que sólo parece ese “cacho” de la imagen que corresponde con la imagen1.
Al poner el ratón por encima le estamos diciendo que en vez de empezar a poner la imagen1y2.jpg desde la derecha (la imagen es la misma, por eso no hace falta poner url de fondo en la etiqueta, porque es la misma), la empiece a poner desde la izquierda y como su anchura es la misma que la de la imagen2, pues sólo aparece el “cacho” que corresponde con esta.
Lo bueno de esto es que, aunque no toda la imagen1y2.jpg se muestre en todo momento, si que se carga entera en el navegador, por lo que no vemos el molesto parpadeo y el efecto es instantáneo.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas