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?

Can you post the code which is not working for you? – Jake Chasan Jun 27 '18 at 17:53 — Jake Chasan, Jun 27 '18 at 17:53
This is related: https://stackoverflow.com/q/745110/691711 – zero298 Jun 27 '18 at 17:54 — zero298, Jun 27 '18 at 17:54

Devansh J · Accepted Answer · 2018-06-29T08:04:29.210

1

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

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

Everything should be in %
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

edited Jun 29 '18 at 08:04

answered Jun 27 '18 at 18:16

Devansh J

4,006
11
23

This is perfect, exactly what I needed! Thank you so much for taking your time to help me out. ^w^ – Alexandria Jun 28 '18 at 23:59
@Alexandria You're welcome! :D Also you are really sweet ^_^ xD – Devansh J Jun 29 '18 at 07:59

score 0 · Answer 2 · answered Jun 27 '18 at 17:58

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

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

2 Answers2