How to make a smooth zoom of the image on hover – effect on pure CSS

🗓️ Updated: 05.08.2022
💬Comments: 1
👁️Views: 14737

After reading this article, you’ll learn how to make the image smoothly zoom when you hover the mouse. And not just increase in size, but create a zoom effect.

We will only use HTML and CSS. We won’t need any JavaScript.

So, let’s write some html code. We will put our image img in a block with the class photo

<div class="photo">
  <img src="https://webgolovolomki.com/wp-content/uploads/2020/11/hover-img.jpeg">
</div>

I’m not adding any additional classes to the image here so as not to confuse you when explaining it. But on your project, it would be better if you add some own class to the img tag and call the image by this class.

Next, let’s move on to css. With the pseudo class hover we will be able to change the values of the properties.

In this case, we will enlarge the image by changing its transform property. Let’s write it in the code:

.photo:hover img {
  transform: scale(1.1);
}

Here we have the following explanation: when you hover a block containing a picture (class photo), we change the transform value of the image itself (img).

The Scale value is how much we scale the picture. The default value is 1.

To add a little smoothness to the transition, add the transition property for the img tag

img {
  transition: transform 0.25s;
}

Here we specified which property we were going to change and how long the transition would last.

Now the picture is zooming smoothly, but it’s outside of its conditional frame. To fix this, we need to add the overflow property to the photo block with the value hidden

.photo {
  overflow: hidden;
}

It’s like we’re saying: everything that goes beyond this block, we hide.

But that’s not all, because the browser doesn’t know the size of our block – so we need to set it. And for the image, we have to make sure that it takes up the full width and height of the photo block.

You end up with a code like this:

.photo {
  width: 400px;
  height: 350px;
  overflow: hidden;
}
img {
  transition: transform 0.25s;
}
.photo:hover img {
  transform: scale(1.1);
}

Example of work:

See the Pen How to make a smooth zoom of the image on hover – effect on pure CSS by Pelegrin (@pelegrin2puk) on CodePen.

I hope you have understood the principle by which you can make a smooth zoom of the image on hover. I will attach our video, where I once again explain everything in detail.

Was the article helpful?
👍
Yes - 35
👎
Not - 7
💬Comments:
Сам прийду

Мені сподобалась задачка, затупив і не глянув що вер і низ)) на уважність)) 😁 більше таких цікавих речей незавадить))

CSS Головоломки в Telegram
Subscribe and don't miss:
Actual news
Interesting puzzles
Useful links
Our rating
🏆The best website hosting
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Что читают?
🏆Популярные записи
How to make a burger menu – complete code and detailed explanation
Views: 27364
Appearance of elements on scrolling
Views: 23787
How to make a smooth zoom of the image on hover – effect on pure CSS
Views: 14737
How to center an image with CSS
Views: 12966
How to make a button click effect in CSS
Views: 9779
Check of knowledge
🤔How well do you know CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Viva Magenta
🤔Color of 2023
The Pantone Research Institute has chosen the color of the year for 2023. They became a carmine-red shade with a purple undertone, which was called Viva Magenta.
#bb2649