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); }
} .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
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
like on a seperate file to test?
I wouldn't want my image to scale larger than its original state as it would get distorted.
Like in a codepen
it will be like 10px of off each side, for aesthetics
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