Help overlaying Buttons and Hover effects on an Image

Design help General
1

Hi guys,
If you have any ideas or tutorials to share to help, I’d really appreciate it. Using the image below as an example. I’m looking to have an image of a vehicle with overlayed button labels. The buttons are links that would lead to other pages.
When hovering over the label – a small text box appears.
Any idea on how to structure the buttons on the page to make this happen?
Nice to have:
When hovering over each label, it swaps to the same image where the car part is selected.

xcars-1.jpg.pagespeed.ic.2KQP52F2kP
xcars-1.jpg.pagespeed.ic.2KQP52F2kP691×407 95 KB

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

2

Hi Viridris,

You can create a Div element (position relative) with an image inside (position absolute), give the Div element the exact size of the image and fill the div (width 100%; height auto; left 0; top 0;).

After that you can create for example Span elements in side the Div that can function as text box overlay triggers. And place them at the desired locations.

This will give you a start, goodluck!

Kind regards,
Edwin