CODEWITHSUNDEEP
javascripthtmlcssimagehover
Rixy
Rixy

Reputation: 157

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

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.

Upvotes: 3

Views: 5347

Answers (4)

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9449

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%;
}

Upvotes: 1

Siddharth Thevaril
Siddharth Thevaril

Reputation: 3788

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>

Upvotes: 1

Stephan Max
Stephan Max

Reputation: 147

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

Upvotes: 0

Joseph
Joseph

Reputation: 119847

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

Upvotes: 1

Related Questions