Tutorial de :hover

Crea interacciones visuales impresionantes con el pseudo-clase :hover

¿Qué es :hover?

:hover es un pseudo-clase de CSS que se activa cuando el usuario coloca el cursor del mouse sobre un elemento. Es fundamental para crear sitios web interactivos y mejorar la experiencia del usuario.

Sintaxis: selector:hover { propiedades }

1. Cambio de Color Simple

El efecto más básico: cambiar el color de fondo al pasar el mouse.

.btn-simple {
    background-color: #2193b0;
    color: white;
}

.btn-simple:hover {
    background-color: #6dd5ed;
    color: #2193b0;
}
            

Pasa el cursor sobre el botón

2. Botón con Transición Suave

Agregamos transition para hacer el cambio más fluido y profesional.

.btn-transition {
    transition: all 0.3s ease; /* Animación suave */
}

.btn-transition:hover {
    transform: translateY(-3px); /* Sube 3px */
    box-shadow: 0 5px 15px rgba(231, 76, 60, 0.4);
}
            

Observa la transición suave

3. Efecto de Escala (Zoom)

Usa transform: scale() para hacer que el elemento crezca.

.btn-scale:hover {
    transform: scale(1.1); /* Crece 10% */
}
            

El botón crece al hacer hover

4. Card con Elevación

Efecto muy popular en diseño moderno: la tarjeta se eleva al pasar el mouse.

.card-hover:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}
            

Pasa el mouse sobre la tarjeta

Tarjeta Interactiva

Esta tarjeta se eleva cuando pasas el cursor sobre ella, creando un efecto de profundidad.

5. Zoom en Imagen

Efecto de zoom en imágenes, muy usado en galerías y e-commerce.

.image-zoom:hover {
    transform: scale(1.2); /* Zoom 120% */
}
            

Haz hover sobre la imagen

IMAGEN

6. Subrayado Animado

Efecto elegante usando ::after pseudo-elemento.

.link-underline::after {
    content: '';
    width: 0;
    transition: width 0.3s ease;
}

.link-underline:hover::after {
    width: 100%;
}
            

Pasa el cursor sobre el texto

Hover para subrayado

7-10. Efectos de Transformación

Diferentes efectos usando transform, opacity y border.

Interactúa con cada caja

Cambio de Color

Rotación 180°

Opacidad

Borde Animado

11. Efecto de Brillo (Glow)

Crea un efecto de brillo usando múltiples sombras.

.btn-glow:hover {
    box-shadow:
        0 0 20px #27ae60,
        0 0 40px #27ae60,
        0 0 60px #27ae60;
}
            

Observa el brillo

12. Tarjeta Giratoria (Flip Card)

Efecto 3D avanzado que voltea la tarjeta usando rotateY().

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}
            

Pasa el mouse para voltear

FRENTE

REVERSO

13. Tooltip (Información Emergente)

Muestra información adicional al pasar el mouse.

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}
            

Pasa el cursor sobre el botón

14. Menú Interactivo

Menú de navegación con efectos hover en cada item.

.menu li:hover {
    background-color: #34495e;
    transform: translateY(-3px);
}
            

Pasa el cursor sobre los items del menú

15. Iconos Sociales

Iconos que se elevan y crecen al hacer hover.

.social-icon:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}
            

Interactúa con los iconos

16. Galería de Imágenes

Galería con efecto de overlay oscuro y zoom.

.gallery-item:hover {
    transform: scale(1.05);
}

.gallery-item:hover::before {
    opacity: 1; /* Overlay oscuro */
}
            

Explora la galería

Imagen 1

Imagen 2

Imagen 3

Imagen 4

Imagen 5

Imagen 6

Propiedades Comunes con :hover

Propiedad	Uso	Ejemplo
background-color	Cambiar color de fondo	background-color: #ff0000;
color	Cambiar color de texto	color: white;
transform: scale()	Escalar elemento	transform: scale(1.1);
transform: translateY()	Mover verticalmente	transform: translateY(-10px);
transform: rotate()	Rotar elemento	transform: rotate(180deg);
opacity	Cambiar transparencia	opacity: 0.5;
box-shadow	Agregar/cambiar sombra	box-shadow: 0 10px 30px rgba(0,0,0,0.3);
border	Cambiar bordes	border: 3px solid red;
transition	Animar cambios	transition: all 0.3s ease;

Consejos y Mejores Prácticas

Recomendaciones:

Siempre usa transition: Hace que los cambios sean suaves y profesionales
No abuses de los efectos: Demasiadas animaciones pueden distraer al usuario
Piensa en móviles: :hover no funciona igual en dispositivos táctiles
Indica interactividad: Usa cursor: pointer en elementos clickeables
Mantén consistencia: Usa efectos similares en toda tu página
Prueba la velocidad: Transitions de 0.3s suelen ser óptimas

Errores Comunes:

Olvidar agregar transition (los cambios serán bruscos)
Usar tiempos muy largos (mayor a 1 segundo puede ser molesto)
No considerar la accesibilidad (algunos usuarios navegan sin mouse)

Experimenta

Abre las herramientas de desarrollador (F12), inspecciona cualquier elemento de esta página y modifica los valores de CSS en tiempo real para ver cómo funcionan los diferentes efectos.