In css, how to click the picture with the mouse to enlarge the picture first and then restore the effect of normal size

In

css, how to click on the picture with the mouse to enlarge the picture and then restore the normal size?

Jun.21,2021

img:hover {

transform: scale(1.1);

}
1.1 is a multiple


you need to write an animation
see https://daneden.github.io/ani. to find the animation effect you need

of course, you can also write an animation effect yourself

keyframes zoomLarge {
    from 0% {
        transform:scale(0)
    }
    
    50% {
        transform:scale(1.2)
    }
    
    to {
        transform:scale(0)
    }
}

add

under your class in css
animation:zoomLarge 5s 1;
I hope I can help you. Welcome to my official account of Wechat: Front-end Guide
Menu