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.

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.

• javascript
• html
• css
• image
• hover

Share Improve this question Follow asked Jul 17, 2015 at 19:19 RixyRixy 15711 silver badge1010 bronze badges 1

• Yes it is possible, just have a parent element with the image inside by larger and have a hover action on that. – depperm Commented Jul 17, 2015 at 19:21

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

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/en/images/filters/examples/color-taj-sample-colorize.jpg');
}

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

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*/
} 

Is this what you are going for. her is my fiddle https://jsfiddle/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%;
}

You could also set the image to display: block and add padding, if it does not mess with your layout.