Home / Questions / 563482
Accepted
Fausto
Asked: 2022-10-21 21:50:44 +0800 CST 2022-10-21 21:50:44 +0800 CST

css animation for portfolio

  • 772

One question, I want the css animation of this code to be made a thumbnail also when the mouse is removed from it, any suggestions?

Code:

  #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 ;}
}
css

1 Answers

  1. Best Answer

    You don't need to use animation, since a transition to the scale property is enough to do what you need. In the example below, the image scales to 1.2, this means 20% larger. If it were 30% smaller it would be 0.7, double it would be 2, and so on.

    #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