[How To] Hacer efecto Roll over de imágenes con CSS
Existen dos formas de hacer un efecto roll over de imágenes con CSS (como el que está en el header de esta página).
LA PRIMERA FORMA es hacerlo como yo lo hice (de mala forma, según mi percepción). La ventaja es que se trata de algo lógico y simple, pero que quita estética:
a {
display: block;
width: ##px;
height: ##px;
background-image: url(”imagen.jpg”);
}
a:hover {
background-image: url(”imagen2.jpg”);
}
La desventaja es que la imagen se carga a la hora de pasar el puntero por encima del elemento (a), por lo que tardará un tanto en descargarlo (sin recargar la página).
LA SEGUNDA FORMA es hacer una sola imagen y mediante la propiedad background-position, cambiar la posición de la imagen para que se vea la otra parte, de esta forma la imagen se cargaría al cargar la página y no sería necesario cargarla al pasar el ratón por encima del elemento… bueno, mejor lo explico con código:
a {
display: block;
width: ##px;
height: ##px;
background-image: url(”imagen.jpg”);
}
a:hover {
background-image: url(”imagen.jpg”);
background-position: left -25px; /* tomando en cuenta que la imagen mide 25 pixeles, la duplicaríamos a 50 pixeles, en los 25 pixeles restantes copiariamos el estado hover */
}
La imagen en cuestión sería esta:
Y el ejemplo de rollover con CSS
También Lee
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Comments
Aún no hay comentarios.
Deje un comentario