Interactive Graphic Navigation with Hovering

[robonohra (Nohra)]

Hello! I would like to introduce a rather specific type of site navigation and need some help finding a tool to do it. Imagine a doodle of a city landscape with a windmill, a water tower, and a bridge in different semi-transparent colors, each representing different engineering disciplines (electrical, environmental, and civil, respectively). When you hover over the windmill, the color will become opaque, and the word “ELECTRICAL” will show up in the same color to the side. Then, when you click on the windmill, you will be taken to Electrical Engineering page.

Is there anything that comes to mind for such a thing? The idea is to present engineering as an essential and connected part of a society right off the bat.

---

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

[garymichael1313 (G.J.)]

Hi,

You will need to create this in a graphics program like Photoshop, Affinity, Inkscape or Corel. The images must be exported into individual SVG or PNG’s. Upon inserting into Webflow, you’ll need them entered as individual images, inside of a parent div, these two will need to be placed inside of a parent wrapper.

Then each individual vector will have it’s own interaction created in Webflow, similar to an ‘hover image’ map of sorts. Each vector will be clickable or linked to your chosed page.

Alternatively, if you want the entire vector to be auto-clickable, you can put them inside of a link block. This format gives a hand instead of a cursor, which lets users know it’s clickable, but you can add the ‘Cursor’ change in the bottom of styles panel.

But they will need to be individual vectors.