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 larger than the image?
For example, I have a 72px x 61px image and when I hover over it, it changes to another image. What I would like to know is that I can hover outside of the image but still cause the image to change.
Sorry if this is confusing, I tried to post an image, but since I just signed up I can't.
source to share
This is a working example, hover
in color area onlygray
.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>
source to share
Yes. Put it in a container ( <div>
, <a>
, whatever), add padding to a container (in order to increase the area).
If you're doing this in JS, attach the hover handler to the container instead of the image.
If you are doing CSS, something like this should be helpful:
.container:hover img{
/* styles for img when .container is hovered*/
}
source to share
This is what you are going to do. this 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%;
}
source to share