I wanted to make an image with overlay layer that changes size when it's hovered, but when I'm hovering the overlay layer is shifted to the right and bottom.
I think it is because of this part, but I have no idea what else I could use.
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.panel-daredevil img {
width: 300px;
height: 450px;
border-radius: 40px;
transition: 500ms;
}
.panel-daredevil {
position: relative;
display: inline-block;
}
.panel-daredevil .text {
font-family: monospace;
text-transform: uppercase;
font-size: 30px;
color: white;
background-color: red;
padding: 10px;
border-radius: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.panel-daredevil .overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 450px;
background-color: rgb(255, 0, 238);
border-radius: 40px;
opacity: 0;
transition: 500ms;
}
.panel-daredevil:hover .overlay {
opacity: 0.3;
transform: scale(1.1);
}
.panel-daredevil:hover img {
transform: scale(1.1);
}<body>
<div class="panel-daredevil">
<a href="daredevil.html">
<img src="pictures/daredevil.jpg" alt="daredevil">
<div class="overlay"></div>
<div class="text">daredevil</div>
</a>
</div>
</body>