Páginas

EFECTO SHOCK

Sin cambio

.EfectoShock img:hover {
    animation: shock 0.4s ease;
    -webkit-animation: shock 0.4s ease;
}

@keyframes shock {
    0% {
        -webkit-transform: translate(0, 0) scale(1);
        transform: translate(0, 0) scale(1);
        -webkit-filter: blur(0);
        filter: blur(0);
    }

    20% {
        -webkit-transform: translate(5px, -1px) scale(1.03);
        transform: translate(5px, -1px) scale(1.03);
        -webkit-filter: blur(5px) saturate(150%);
        filter: blur(5px) saturate(150%);
    }

    60% {
        -webkit-transform: translate(-5px, 1px) scale(1.03);
        transform: translate(-5px, 1px) scale(1.03);
        -webkit-filter: blur(0);
        filter: blur(0);
    }

    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-filter: blur(0);
        filter: blur(0)
    }
}

.EfectoShock img {
    transition: opacity 0.4s ease-in-out;
}

Con cambio

Para que el cambio aplique, debe tener la url de la otra imagen y se cambia al final… debe tener en cuenta la clase.

.EfectoShock2 img:hover {
    animation: shock 0.4s ease;
    -webkit-animation: shock 0.4s ease;
}

@keyframes shock {
    0% {
        -webkit-transform: translate(0, 0) scale(1);
        transform: translate(0, 0) scale(1);
        -webkit-filter: blur(0);
        filter: blur(0);
    }

    20% {
        -webkit-transform: translate(5px, -1px) scale(1.03);
        transform: translate(5px, -1px) scale(1.03);
        -webkit-filter: blur(5px) saturate(150%);
        filter: blur(5px) saturate(150%);
    }

    60% {
        -webkit-transform: translate(-5px, 1px) scale(1.03);
        transform: translate(-5px, 1px) scale(1.03);
        -webkit-filter: blur(0);
        filter: blur(0);
    }

    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-filter: blur(0);
        filter: blur(0)
    }
}

.EfectoShock2 img {
    transition: opacity 0.4s ease-in-out;
}


.EfectoShock2 img:hover {
    content: url('https://dev.miguelsantacruz.com/wp-content/uploads/2025/05/Muestras_LED_encendido.webp'); /* Imagen al pasar el mouse */
}