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ó. el 25 sep. 2022 a las 12:48

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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