Image hover hitbox not big enough-CodePudding

I’m trying to make an hover effect with an image that increase the size but it doesn’t react everywhere. For other words, how do increase the Hitbox for a image without it actually expanding

Ok, first of all. I tried to use different kinds of scaling, margin, padding, etc. but I just don’t have enough experience

CodePudding user response：

You can set the width and height of the image doing this into your css file :

your class / attriute{
   width:50px;
   height:50px;
   transition: transform .2s; /* Simple animation */
}

And then you can add this property :

your class / attriute:hover{
    transform:scale(2.5);
}

CodePudding user response：

Here are a few ways to enlarge the hit-hover area of an element.

Option 1: large transparent border

img {
   border: 50px solid transparent;
}

img:hover {
  filter: contrast(0.3);
}

<img src="https://via.placeholder.com/150" />

Option 2: add the image in CSS background: url()

div {
  width: 300px;
  height: 300px;
  background: url(https://via.placeholder.com/150) no-repeat 50% 50%;
}

div:hover {
  filter: contrast(.3);
}

<div></div>

Option 3: Target a sibling element

.wrap {
  position: relative;
}

.wrap div,
.wrap img {
  position: absolute;
}

.wrap div {
  width: 300px;
  height: 300px;
  z-index: 2;
}

.wrap div:hover   img {
   filter: contrast(.3);
}

<div > 
  <div></div>
  <img src="https://via.placeholder.com/150" />
</div>