1

Estoy intentando hacer que al poner el cursor del raton sobre una imagen este se mueva un poco hacia abajo, y que al quitar el cursor del elemento vuelva a su posicion original. Y lo he conseguido, el problema es que quiero poner una animacion entre los movimientos y no se como hacer que el elemento en cuestion tenga una animacion a su estado original al quitar el hover. ¿Algún consejo?

.press {
  margin-top: 15px;
  position: relative;
}

.press:hover {
  animation: mymove 0.5s;
  animation-fill-mode: forwards;
}

@keyframes mymove {
  from {
    top: 0px;
  }
  to {
    top: 10px;
  }
}
<a href="#">
  <img class="press" src="https://logodownload.org/wp-content/uploads/2017/11/discord-logo-0.png" width="60%" height="auto">
</a>

1 respuesta 1

3

Puedes hacer esto de una manera mas fácil de la que lo has hecho: Le asignas una transicion a tu clase, y luego haces que cuando se ponga el ratón encima, se mueva a la ubicación deseada

.press {
  position: relative;
  top: 0;
  transition: top ease 0.5s;
  width: 64px;
}
 .press:hover {
  top: 10px;
}
<a href="#">
  <img class="press" src="https://logodownload.org/wp-content/uploads/2017/11/discord-logo-0.png" width="60%" height="auto">
</a>

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.