Skip to main content
se eliminaron 2 caracteres en el cuerpo
Origen Enlace

Buenos días/tardes/noches gente de StackOverflow.
Estoy trabajando en esteun 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.

Buenos días/tardes/noches gente de StackOverflow.
Estoy trabajando en este 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.

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.

Origen Enlace

¿Cómo hago que mis transiciones vuelvan a su lugar gradualmente cuando quito el :hover?

Buenos días/tardes/noches gente de StackOverflow.
Estoy trabajando en este 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.