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

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.