How to show a dropdown when you hover over a specific area an on image? (HTML, CSS)

Question

Is it possible to show a dropdown whenever you hover over some specific area on an image? For example, if my mouse is within 50,62 and 70,80. I already tried this with invisible boxes and divs, but the only way I could get them to overlay the image was with position properties, but they wouldn't stay in place if I reshaped or resized the screen. Any ideas?

Answer 1

Demo : http://jsfiddle.net/v8dp91jL/12/

The code is pretty self-explanatory. Just two imp things:

1. Everything should be in %
2. the .dropdown is inside .hover-area so that when you move your mouse from .hover-area to .dropdown , .dropdown doesn't disappear because it is still technically inside .hover-area even tho it's visually not

Answer 2

You can add some hidden element ( span ) positioned on some specific area and it is going to trigger the hover:

HTML:

<div class="image-wrapper">
    <span class="image-hover-trigger"></span>
    <img src="..." >
    <div class="dropdown"></div>
</div>

CSS:

.image-wrapper { position: relative; }
.image-hover-trigger { position: absolute; top: 20%; left: 20%; right: 20%; bottom: 20%; }
.dropdown { display: none; }
.image-hover-trigger:hover ~ .dropdown { display: block; }