I’m trying to add zoom on hover to some images.
First I tried classic scale transformation, but it doesn’t work well with smaller devices like mobile as the scaled images exceed the viewport width:
.scaled {
max-width: min(350px, 95%);
}
.scaled:hover {
position: relative;
z-index: 999;
transform: scale(3);
transition-delay: .5s;
}
.main {
display: flex;
}
.main div {
flex: 1;
} <div class="main">
<div>
<p>Some other stuff that shouldn't be relocated, the 50/50 flex should be preserved</p>
</div>
<div>
<img src="https://picsum.photos/600/900" class="scaled" />
</div>
</div>Adding max-width to :hover here does nothing as it’s ignored by transform.
This max-width transition method, on the other hand, messes up the flex layout on desktop devices:
.scaled {
max-width: min(350px, 95%);
}
.scaled:hover {
max-width: 85vw;
transition: max-width .5s ease-in-out;
transition-delay: .5s;
}
.main {
display: flex;
}
.main div {
flex: 1;
} <div class="main">
<div>
<p>Some other stuff that shouldn't be relocated, the 50/50 flex should be preserved</p>
</div>
<div>
<img src="https://picsum.photos/600/900" class="scaled" />
</div>
</div>And if you set max-width to e.g. 95% instead, it doesn’t really zoom in.
Is there any way to keep the “don’t affect anything else in the DOM” property of transform, but also restrict the maximum width of the transformation scale? While using only CSS.