Zooming into an image

How can i make the image zoom into itself when hovering over it but without changing its size on the website, basically zooming while keeping its width and height. Here is my code: .sec4{ box-sizing: border-box; max-width: 100%; display: flex; justify-content: center; margin: 0 1vw; } .sec4-sub{ box-sizing: border-box; overflow: hidden; position: relative; text-align: center; color: white; margin-bottom: 30px; transition: transform 0.5s ease; } .sec4-sub:last-child{ margin-bottom: 0; } .sec4-sub img{ box-sizing: border-box; width: 700px; height: 60vw; filter: brightness(50%); max-width: 100%;
} .sec4-sub p{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 32px; margin: 0; } .sec4-sub a{ color: white; } .sec4-sub:hover{ filter: brightness(150%); transition: 0.3s; transform: scale(1.1); }
5 Replies
b1mind
b1mind9mo ago
Make it larger first then scale it down, and revert back to scale(0) on hover? Best if you make a minimal demo typically for things like this
Furious
Furious9mo ago
like on a seperate file to test?
b1mind
b1mind9mo ago
I wouldn't want my image to scale larger than its original state as it would get distorted. Like in a codepen
Furious
Furious9mo ago
it will be like 10px of off each side, for aesthetics
MarkBoots
MarkBoots9mo ago
I don't think you'll be able to do it with only an img element, but with a wrapper (in this case a <picture>) you can do something like this
<picture>
<img src="https://picsum.photos/400/400" alt="">
</picture>
<picture>
<img src="https://picsum.photos/400/400" alt="">
</picture>
picture {
display: grid;
width: fit-content;
overflow: hidden;
> img {
transition: scale 0.5s;
&:hover{
scale: 1.2;
}
}
}
picture {
display: grid;
width: fit-content;
overflow: hidden;
> img {
transition: scale 0.5s;
&:hover{
scale: 1.2;
}
}
}
Want results from more Discord servers?
Add your server