image hover area is bigger than the image itself - html

Question

So i have an image i use that is supposed to have a hover function on it. The problem I run into is that the hover area, so where the mouse needs to be to activate the hover function, is way bigger than the image itself. I have linked 2 images below, 1 where the hover is not activated and 1 where it is. On the 2nd image you can clearly see what I mean.
Also below is my HTML and CSS code. I used the following W3 page for this: https://www.w3schools.com/howto/howto_css_image_overlay.asp
Image 1: https://imgur.com/a/jvre00A
Image 2 (you cannot see my mouse, but its all the way over on the right): https://imgur.com/a/OfsQUCB
<div class="containerpic">
<img src="images/duurzaamheid/blauw.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
.containerpic {
position: relative;
width: 180px;
}
.image {
display: block;
width: 180px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 180px;
opacity: 0;
transition: .5s ease;
background-color: green;
}
.container:hover .overlay {
opacity: 0.5;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}

Answer 1

Here, is the example. You may see whether image is static or :hover - the area of image remains same.
If you have added some other effects like img:hover {border: 2px solid #bbb;}, or adding some padding or any other effect - then only you'll get mirage that image-area has changed, while in reality it just remains the same.
img:hover {opacity:0.5}
<div><img src="https://picsum.photos/seed/picsum/100/100" /></div>

Answer 2

I modify your code, let see if this will fix it.
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" class="image">
<div class="overlay">
<div class="text">
Hello World
</div>
</div>
</div>
.container {
position: relative;
width: 180px;
}
.image {
max-width: 100%;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: .5s ease;
background-color: beige;
z-index: 1;
}
.container:hover .overlay {
opacity: 0.5;
}
.text {
color: black;
font-family: 'Arial';
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 2;
}