CODEWITHSUNDEEP
css
Ferhat
Ferhat

Reputation: 303

How to Zoom an Image on Mouse Hover using CSS?

I just want to zoom the image. I need to give the height of my product list automatically because it is not responsive, but when I do that the container stretches down, how can I avoid this?

.zoom-img {
  width: 300px;
  height:auto;
  overflow: hidden;
}

.zoom-img  img {
  width: 100%;
  transition: all .3s ease-in-out;
}

.zoom-img img:hover   {
  transform: scale(1.2);
}
<div class="zoom-img">
  <img src="https://www.arthenos.com/wp-content/uploads/2017/08/Manzara_fotografciligi_2-1200x900.jpg" alt="This zooms-in really well and smooth">
</div>

My hover image enter image description here

Upvotes: 12

Views: 34043

Answers (3)

Gia
Gia

Reputation: 39

i think you need to use overflow: clip; instead of overflow: hidden;

.zoom-img {
  width: 100%;
  height: 300px;
  overflow: clip;
}

.zoom-img img {
  width: 100%;
  transition: all .3s ease;
}

.zoom-img img:hover {
  transform: scale(1.2);
}

<div class="zoom-img">
  <img src="https://www.arthenos.com/wp-content/uploads/2017/08/Manzara_fotografciligi_2-1200x900.jpg" alt="This zooms-in really well and smooth">
</div>

Upvotes: 0

LuckyLuke Skywalker
LuckyLuke Skywalker

Reputation: 791

Now there is a scale property which let's you zoom without any further lines needed.

Just use this on hover:

scale: 1.2;

But height: auto would still be a problem. The height needs to be fixed either way or it will always overflow, use either a fixed height or make it fixed from the width via aspect-ratio: x / y

Upvotes: 0

Ihor
Ihor

Reputation: 1244

Use object-fit property.
I made all images have 1:1 aspect ratio.

.zoom-img {
  width: 300px;
  height: 300px;
  overflow: hidden;
}

.zoom-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all .3s ease;
}

.zoom-img img:hover {
  transform: scale(1.2);
}
<div class="zoom-img">
  <img src="https://www.arthenos.com/wp-content/uploads/2017/08/Manzara_fotografciligi_2-1200x900.jpg" alt="This zooms-in really well and smooth">
</div>

Or use aspect-ratio property too.

.zoom-img {
  width: 300px;
  overflow: hidden;
}

.zoom-img img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: all .3s ease;
}

.zoom-img img:hover {
  transform: scale(1.2);
}
<div class="zoom-img">
  <img src="https://www.arthenos.com/wp-content/uploads/2017/08/Manzara_fotografciligi_2-1200x900.jpg" alt="This zooms-in really well and smooth">
</div>

Upvotes: 10

Related Questions