Skip to main content
Poner el código en formato ejecutable
Origen Enlace
ArianJM
  • 3.4k
  • 10
  • 22

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;
}
 .press:hover {
    top: 10px;
}

.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>

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;
}
 .press:hover {
    top: 10px;
}

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>

Origen Enlace
Maida
  • 992
  • 5
  • 13
  • 22

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;
}
 .press:hover {
    top: 10px;
}