Efecto “Hover” usando CSS

He llamado efecto “Hover” al efecto que sucede tras pasar el puntero del mouse sobre un objeto, en este caso, sobre una imagen que cambia a texto cuando me poso sobre ella (ver imágenes). Personalmente, prefiero implementar una web con el efecto “hover” usando CSS; antes, lo hacía con flash, pero no todos tenían instalado el flash player y claro, puede ser muy simple instalarlo pero hay muchas personas –mayores sobre todo- que no entendían que sucedía. Además, en ocasiones –dependiendo del navegador- tenías que hacer doble clic sobre él para activarlo.

Por ello, quise compartir con ustedes este buen tutorial, uno de de los mejores para mi, donde puedes implementar el efecto “hover” usando CSS. Al final del post pueden encontrar un enlace hacia una demo del efecto y un par de enlaces más, hacia el tutorial.

Ejemplo 1: Cambio de imágenes tras posar el puntero del mouse

css-hover-figure1

Ejemplo 2: Cambio de imágenes al retirar el puntero del mouse

css-swap-hover

(Efecto “hover”: lo he llamdo así al efecto que se avisora al posar el puntero del mouse sobre un objeto).

Enlace | Visitar tutorial (original)
Enlace | Tutorial (traducido español) (Cuidado! que las sentencias CSS tambíen se han traducido)
Ver | Demo (Efecto)

[post_ad]
Efecto “Hover” usando CSS Reviewed by Admin on 3/08/2009 Rating: 5

No hay comentarios:

Todos los derechos reservados | Nestavista © 2024
Powered By Blogger, Designed by Sweetheme

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Nestavista © 2007. Imágenes del tema: Jason Morrow. Con la tecnología de Blogger.