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{
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);
}
