Zoom effects on hover in a div

Anonymous User 689 20 Jul 2021

How to make a div that contains some images and zoom in on hover?

Anonymous User

Software Developer Trainee

I am a content writter !

1 Answers

Aryan Kumar 09 Jun 2023

Sure, here is how you can create a zoom effect on hover in a div using CSS:

Code snippet

div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

div:hover {
  transform: scale(1.5);
}

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

div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  transition: transform 0.5s ease-in-out;
}

div:hover {
  transform: scale(1.5);
}

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.

forum

Zoom effects on hover in a div

Can you answer this question?

1 Answers