How to make a div that contains some images and zoom in on hover?
Zoom effects on hover in a div
350
20-Jul-2021
Aryan Kumar
09-Jun-2023Sure, here is how you can create a zoom effect on hover in a div using CSS:
Code snippet
The div selector will select all div elements on the page. The width and height properties will set the width and height of the div element to 100px. The border property will add a 1px solid black border to the div element.
The div:hover selector will select all div elements when the user hovers over them. The transform: scale(1.5) property will zoom in on the div element by 1.5 times when the user hovers over it.
You can also use the transition property to create a smooth zoom effect. The transition property takes two values: the duration of the transition and the timing function. The duration of the transition is the amount of time it will take for the zoom effect to complete. The timing function determines how the zoom effect will progress over time.
Here is an example of how to use the transition property to create a smooth zoom effect:
Code snippet
The transition: transform 0.5s ease-in-out property will create a smooth zoom effect that takes 0.5 seconds to complete. The ease-in-out timing function will cause the zoom effect to start slowly, speed up in the middle, and then slow down again at the end.
You can experiment with different values for the duration and timing-function properties to create a zoom effect that you like.