Efecto hover fade CSS - cambiar fade out con el ratón (código copy-paste) | WPPoland

Mariusz Szatkowski

ES

Efecto hover de imagen CSS - Tutorial de transición fade suave

Última verificación: 17 de agosto de 2026

8 min de lectura

Tutorial

En los viejos tiempos (era jQuery), usábamos .animate() o .fadeIn() para efectos hover. En 2026, usar JavaScript para esto es un crimen contra el rendimiento.

CSS3 transition está acelerado por hardware (manejado por la GPU), es más suave y no requiere ningún script.

Si buscaste un efecto hover de imagen CSS, la respuesta más corta es está: añade transition: opacity 0.3s ease-in-out; al elemento, luego cambia opacity en :hover. Ese patrón cubre la mayoría de atenuaciones de imagen, miniaturas de tarjetas, fades de botón y revelaciones de overlay.

#Como cambiar el efecto fade out al pasar el ratón con CSS

La petición más común es un cambio suave de opacity cuando el cursor entra o sale de un elemento. Este es el patrón mínimo:

.element {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.element:hover {
    opacity: 0.7;
}

Esa es toda la implementación. Tres declaraciones en el estado base, una en el estado hover. La propiedad transition indica al navegador que anime el cambio de opacity durante 0.3 segundos con una curva ease-in-out.

Este patrón funciona en imágenes, botones, tarjetas, enlaces, iconos y cualquier otro elemento HTML. Ajusta la opacity objetivo (0.7 en este ejemplo) para controlar cuanto se atenúa el elemento. Valores más bajos crean un efecto fade más fuerte.

Para un efecto fade-in en hover (el elemento empieza atenuado y se vuelve completamente visible), invierte los valores:

.element {
    opacity: 0.5;
    transition: opacity 0.3s ease-in-out;
}

.element:hover {
    opacity: 1;
}

#Por qué las transiciones CSS superan a JavaScript

Beneficios de rendimiento:

Aceleración GPU: Las transiciones CSS se ejecutan en la tarjeta gráfica, no en la CPU
Sin ejecución JavaScript: Cero sobrecarga de scripts, respuesta instantánea
Optimización del navegador: Los navegadores optimizan las animaciones CSS nativamente
Amigable con la batería: Menos uso de CPU significa mayor duración de batería en móvil

Los números:

Animación JavaScript: ~16ms por frame (objetivo 60fps)
Transición CSS: <1ms de sobrecarga, el navegador maneja el resto
Tamaño de archivo: CSS es más pequeño que las librerías jQuery/JavaScript

#Efecto fade básico

Digamos que tienes una imagen que debería atenuarse cuando pasas el ratón sobre ella.

/* El elemento */
.hover-image {
    opacity: 1;
    /* La parte magica */
    transition: opacity 0.3s ease-in-out;
}

/* El activador */
.hover-image:hover {
    opacity: 0.7;
}

Que ocurre:

La imagen comienza con opacity: 1 (totalmente visible)
Al hover, transiciona a opacity: 0.7 (30% transparente)
Tarda 0.3 segundos con easing suave
Vuelve a opacity: 1 cuando termina el hover

#Entendiendo las propiedades de transición

#Transition-property

Específica que propiedad CSS animar. Siempre específica propiedades concretas en lugar de all para mejor rendimiento.

/* Correcto: Propiedad específica */
transition: opacity 0.3s ease-in-out;

/* Evitar: Anima TODAS las propiedades (impacto en rendimiento) */
transition: all 0.3s ease-in-out;

Propiedades animables:

opacity - Fade in/out
transform - Escalar, rotar, trasladar
background-color - Cambios de color
border-radius - Esquinas redondeadas
box-shadow - Efectos de sombra

No animables (evitar):

display - Usa opacity + visibility en su lugar
font-family - Solo cambio instantáneo

#Transition-duration

Cuanto dura la animación. Valores comunes:

Mejores prácticas:

0.2-0.3s: Interacciones UI estándar (botones, enlaces)
0.15s: Micro-interacciones (tooltips, badges)
0.4-0.6s: Transiciones de página, animaciones de modal
>1s: Evitar (se siente lento)

#Transition-timing-function

Controla la curva de aceleración. Esto es lo que hace que las animaciones se sientan “naturales”.

Cuando usar cada una:

ease-out: La mayoría de elementos UI (se siente receptivo)
ease-in-out: Transiciones suaves y elegantes
ease-in: Elementos apareciendo (menos común)
linear: Barras de progreso, indicadores de carga
cubic-bezier: Sensación personalizada (usa herramientas como cubic-bezier.com)

#Efectos hover avanzados

#1. Fade + escala (efecto zoom)

Combina opacity y transform para un efecto zoom moderno:

.card-img {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.3s ease-in-out, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card-img:hover {
    opacity: 0.9;
    transform: scale(1.05);
}

#2. Fade + texto overlay

Perfecto para galerías de imágenes:

.image-container {
    position: relative;
    overflow: hidden;
}

.image-container img {
    opacity: 1;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.image-container .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.image-container:hover img {
    opacity: 0.7;
    transform: scale(1.1);
}

.image-container:hover .overlay {
    opacity: 1;
}

#3. Fade + cambio de color

Para botones y enlaces:

.button {
    background-color: #0073aa;
    color: white;
    opacity: 1;
    transition: opacity 0.2s ease-out, background-color 0.2s ease-out;
}

.button:hover {
    opacity: 0.9;
    background-color: #005177;
}

.button:active {
    opacity: 0.8;
    transform: scale(0.98);
}

#4. Fade + sombra

Añadir profundidad al hover:

.card {
    opacity: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: opacity 0.3s ease-in-out, box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.card:hover {
    opacity: 0.95;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    transform: translateY(-4px);
}

#Optimización del rendimiento

#Usar transform en lugar de posición/tamaño

Incorrecto (desencadena recalculo de layout):

.element {
    left: 0;
    transition: left 0.3s;
}
.element:hover {
    left: 100px;
}

Correcto (acelerado por GPU):

.element {
    transform: translateX(0);
    transition: transform 0.3s;
}
.element:hover {
    transform: translateX(100px);
}

#Limitar propiedades animadas

/* Incorrecto */
transition: all 0.3s; /* Anima todo */

/* Correcto */
transition: opacity 0.3s ease-in-out;

#Usar will-change para animaciones complejas

.animated-element {
    will-change: transform, opacity;
    transition: transform 0.3s, opacity 0.3s;
}

#Ejemplos del mundo real

#Ejemplo 1: Tarjeta de producto

.product-card {
    position: relative;
    overflow: hidden;
}

.product-card img {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.4s ease-in-out, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-card:hover img {
    opacity: 0.8;
    transform: scale(1.1);
}

.product-card .badge {
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: 0;
    transition: opacity 0.3s ease-out 0.1s;
}

.product-card:hover .badge {
    opacity: 1;
}

#Ejemplo 2: Menú de navegación

.nav-link {
    border-bottom: 2px solid transparent;
    transition: opacity 0.2s ease-out, border-color 0.2s ease-out;
}

.nav-link:hover {
    opacity: 1;
    border-bottom-color: #0073aa;
}

#Ejemplo 3: Galería de imágenes

.gallery-item {
    position: relative;
    overflow: hidden;
}

.gallery-item img {
    opacity: 1;
    filter: brightness(1);
    transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out, transform 0.4s ease-out;
}

.gallery-item:hover img {
    opacity: 0.9;
    filter: brightness(0.8);
    transform: scale(1.05);
}

.gallery-item .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: white;
    padding: 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.gallery-item:hover .caption {
    opacity: 1;
    transform: translateY(0);
}

#Consideraciones de accesibilidad

#Respetar movimiento reducido

/* Predeterminado: animaciones habilitadas */
.animated-element {
    transition: opacity 0.3s ease-in-out;
}

/* Preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .animated-element {
        transition: none;
    }
}

#Estados de focus

/* Asegurar que los efectos hover también funciónen en focus */
.interactive-element {
    opacity: 1;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.interactive-element:hover,
.interactive-element:focus {
    opacity: 0.8;
    transform: scale(1.02);
}

/* Focus visible para navegación por teclado */
.interactive-element:focus-visible {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

#Consideraciones para dispositivos táctiles

/* Habilitar efectos hover solo en dispositivos con hover */
@media (hover: hover) {
    .hover-only-effect {
        transition: transform 0.3s ease-in-out;
    }

    .hover-only-effect:hover {
        transform: scale(1.05);
    }
}

#Integración con WordPress

#Añadir CSS vía functions.php

function wppoland_custom_css() {
    ?>
    <style type="text/css">
        .custom-hover img {
            opacity: 1;
            transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
        }
        .custom-hover:hover img {
            opacity: 0.85;
            transform: scale(1.03);
        }
    </style>
    <?php
}
add_action('wp_head', 'wppoland_custom_css');

#Variables CSS personalizadas para efectos reutilizables

:root {
    --transition-duration: 0.3s;
    --transition-easing: ease-in-out;
    --hover-opacity: 0.8;
    --hover-scale: 1.05;
}

.hover-effect {
    opacity: 1;
    transition: opacity var(--transition-duration) var(--transition-easing),
                transform var(--transition-duration) var(--transition-easing);
}

.hover-effect:hover {
    opacity: var(--hover-opacity);
    transform: scale(var(--hover-scale));
}

@media (prefers-color-scheme: dark) {
    :root {
        --hover-opacity: 0.9;
    }
}

#Resumen

Las transiciones CSS son la forma moderna y eficiente de crear efectos hover. Son rápidas, suaves, simples, accesibles y mantenibles.

Puntos clave:

Usa propiedades específicas, no all
0.2-0.3s es el punto óptimo para interacciones UI
ease-out se siente más natural
Usa transform en lugar de propiedades de posición/tamaño
Combina múltiples propiedades para efectos ricos
Prueba en dispositivos reales para rendimiento

En 2026, las transiciones CSS son el estándar para efectos hover. Las animaciones JavaScript solo son necesarias para animaciones complejas e interactivas que CSS no puede manejar.

Explora nuestro desarrollo profesional WordPress para llevar tu proyecto más lejos.