image hover area is bigger than the image itself-CodePudding

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 >
  <img src="images/duurzaamheid/blauw.png" alt="Avatar" >
  <div >
    <div >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;
  }

CodePudding user response：

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>

CodePudding user response：

I modify your code, let see if this will fix it.

<div >  
  <img src="https://www.w3schools.com/howto/img_avatar.png" >
  <div >
    <div >
      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;
}