I want the image to scale but not the container.

    <div class="container">
     <img class="img" src="" />
   </div>

I want the image to scale but not the container.

    <div class="container">
     <img class="img" src="" />
   </div>

• javascript
• css

• on img give hover img:hover { transform: scale(1.1); } give transition to for smoothness. Try and let me know. I will put it up as answer then as well. – Wahab Shah Commented Sep 27, 2021 at 6:52

1 Answer 1

Add max-width for the container and set transform:scale for the image when hovering and set overflow:hidden for the container so that the scaled image won't go out of the container . Also add transition for cool effects.

.container {
  position: relative;
  overflow: hidden;
  max-width: 300px;
  z-index: 1;
}
.container::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #e5e5e5;
  opacity: 0;
  transition: .5s ease all;
}
img {transition: .5s ease all; width: 100%; object-fit:cover;}
.container:hover img {
  transform: scale(1.1);
}

.container:hover::after {opacity: 0.2;}

 <div class="container">
     <img class="img" src="https://picsum.photos/id/237/200/300" />
   </div>

Add pseudo element like ::before or ::after for the ovelay effect and display its visibility on hovering