0

Buenos días/tardes/noches gente de StackOverflow.
Estoy trabajando en un código de CSS e hice unas transiciones de tipo translate de forma que cuando les coloco el cursor (es decir, que se activa el :hover) se muevan hacia arriba tardando 0,75s en completarse la transición, pero cuando quito el cursor de encima vuelven de forma brusca a sus posiciones originales. ¿Cómo hago que también sea gradual la transición de vuelta?

Aquí el código en cuestión:

.product-img-1:hover, .product-img-2:hover, .product-img-3:hover, .product-img-4:hover, .product-img-5:hover {
    -webkit-transform: translateY(-3px);
       -moz-transform: translateY(-3px);
        -ms-transform: translateY(-3px);
         -o-transform: translateY(-3px);
            transform: translateY(-3px);
        -webkit-transition-duration: 0.75s;
           -moz-transition-duration: 0.75s;
            -ms-transition-duration: 0.75s;
             -o-transition-duration: 0.75s;
                transition-duration: 0.75s;
}

Espero que me puedan ayudar. Un saludo y gracias de antemano.

1 respuesta 1

0

Prueba esto:

.product-img-1, .product-img-2, .product-img-3, .product-img-4, .product-img-5 {
           -webkit-transition-duration: 0.75s;
           -moz-transition-duration: 0.75s;
            -ms-transition-duration: 0.75s;
             -o-transition-duration: 0.75s;
                transition-duration: 0.75s;
}

que es darle la transition-duration al elemento directamente, no al pseudo elemento

1
  • Gracias amigo, me funcionó. Commented el 25 sept. 2022 a las 12:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.