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
    Commented el 21 oct. 2022 a las 5:51
  • No uses height ni width; es mejor usar transform: scale(); o no puedes? Commented el 21 oct. 2022 a las 5:55
  • Muchas gracias, justo es lo que pusieron abajo
    – Fausto
    Commented 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
    Commented el 21 oct. 2022 a las 19:06

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.