CODEWITHSUNDEEP
javascriptcss
Shahir Riaz
Shahir Riaz

Reputation: 87

How can i make image scale on hover inside the container?

scale image

I want the image to scale but not the container.

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

Upvotes: 1

Views: 13284

Answers (1)

Viira
Viira

Reputation: 3911

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

Upvotes: 5

Related Questions