I was looking for a way to zoom into an image on mouse hover. Turned out, it is rather easy with CSS.
Let us check it out.
<div id='img-cont'> <img src="https://source.unsplash.com/350x200/?nature"> </div>
Output:
Now apply the following styling to parent division:
#img-cont { -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; -ms-transition: -ms-transform 0.5s; transition: transform 0.5s; } #img-cont:hover { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); cursor: pointer; }
Output:
Wrapping it up inside another division creates a nice effect:
<div id='img-cont-p'> <div id='img-cont'> <img src="https://source.unsplash.com/350x200/?nature"> </div> </div>
And change the styling accordingly:
#img-cont { -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; -ms-transition: -ms-transform 0.5s; transition: transform 0.5s; } #img-cont:hover { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); cursor: pointer; } #img-cont-p { overflow: hidden; }
Output:
Image credit: Unsplash
Copyright Web/ Design/ Vista 2022 ©