Streaming live at 10am (PST)

How to [hover interaction]

Hello!

Can anyone shine a light over how to do this kind of interactivity:

Check here:


https://www.japan-guide.com/

Just point in the right direction!

Thank you!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

HI Noah,

The basic principle is creating a hover interaction using ‘show/hide’ properties on different ‘targets’.

Here is an article from Webflow University that uses the ‘move’ property in the interaction, but the base principle is the same.

Regarding the map highlights, this would involve having 2 images for each section of the map that would ‘highlight’. A normal ‘area’ image, and the highlighted image (show on hover).

It would require a bit of work getting your image areas aligned correctly, but the complexity of the hover interaction itself shouldn’t be too complex.

Hope that helps,
Keiran