CSS3 animation: the image gradually gets bigger when the mouse is on it and gradually shrinks when the mouse leaves it

Effect check address: Tour plan (uplanok.com)

Code:

img{width: 100%;border-radius: 3px;transition: all 2s;}
img:hover{transform: scale(1.2);}

The img outer tag element needs to be set to overflow: hidden, otherwise the image will overflow and cover other content after being enlarged.

This is the end of this article about CSS3 animation that makes an image gradually larger when the mouse is placed on it and gradually smaller when the mouse is removed from it. For more relevant CSS3 image zooming in and out, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!