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>
Share
Improve this question
asked Sep 27, 2021 at 6:48
Shahir RiazShahir Riaz
871 gold badge1 silver badge9 bronze badges
1
-
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
Reset to default 5Add 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