0

una duda, quiero que la animación en css de éste código se haga miniatura también al quitar el mouse de encima, alguna sugerencia?

Código:

  #projects img{
    height: 200px;
    width: 300px;
    margin: 0;
    border-radius: 5px;
}
    #projects img:hover{
        animation-name: animation;
        animation-duration: 1s;
        animation-timing-function: ease-in-out;
        animation-fill-mode:both;
}

@keyframes animation{
    10%{height: 200px;
        width: 300px;}
    50%{height: 300px; width:400px ; }
    100%{height: 300px; width:400px ;}
}
3
  • disculpen si han hecho esta pregunta antes, soy nuevo en el foro y no se buscar muy bien, aún
    – Fausto
    el 21 oct. 2022 a las 5:51
  • No uses height ni width; es mejor usar transform: scale(); o no puedes? el 21 oct. 2022 a las 5:55
  • Muchas gracias, justo es lo que pusieron abajo
    – Fausto
    el 21 oct. 2022 a las 19:05

1 respuesta 1

1

No es necesario que ocupes animation, ya que con una transición a la propiedad scale basta para hacer lo que necesitas. En el ejemplo que pongo a continuación la imagen escala a 1.2, esto quiere decir un 20% más grande. Si fuese un 30% más pequeña sería 0.7, el doble sería 2, y así sucesivamente.

#projects img{
    height: 200px;
    width: 300px;
    margin: 0;
    border-radius: 5px;
    transition: scale 0.5s;
}
#projects img:hover{
    scale:1.2;
}
<div id="projects">
<img src="https://i.pinimg.com/originals/36/30/9f/36309f22e4c16447b085400be01bbc1e.png">
</div>

1
  • Muchas gracias, no recordaba eso, que diferencia de Código jajaja
    – Fausto
    el 21 oct. 2022 a las 19:06

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.