Is there a way to make the hover area larger than the image?

Question

I was wondering if there is a way to make the hover area bigger than the image?

For example, I have an image that is 72px x 61px and when I hover over it, it changes to a different image. What I would like to know is if I can hover outside the image but still trigger the change in the image.

Sorry if this is confusing, I tried to post an image but since I just signed up I am not able to.

Answer 1

Yes. Put it in a container ( <div> , <a> , whatever), add padding to the container (to increase the area).

If what you're doing is in JS, attach the hover handler to the container instead of the image.

If you're doing CSS, something like this should be helpful:

.container:hover img{
  /* styles for img when .container is hovered*/
} 

Answer 2

This is a working example, just hover in the gray colored region

 .outer { border: 1px solid; padding: 60px; width: 300px; background-color: #ddd; } .outer:hover>img { content: url('http://docs.gimp.org/en/images/filters/examples/color-taj-sample-colorize.jpg'); } 

 <div class="outer"> <img src="http://goo.gl/7VYJyX" /> </div> 

Answer 3

Is this what you are going for. her is my fiddle https://jsfiddle.net/pdjoh1dy/1/ HTML

 <div id="hover-example">
     <div id="img-holder">
     </div>
</div>

CSS

#hover-example{width: 500px; height: 500px; border-style: solid;}
#img-holder{margin: 25%; width: 50%; height: 50%; background-color: blue;}
#hover-example:hover > #img-holder{
    background-color: red;
    margin: 10%; 
    width: 80%; 
    height: 80%;
}

Answer 4

您还可以将图像设置为display: block并添加padding ，如果它不会影响您的布局。