Responsive Shapes resizing with image

Design help General
1

I’m designing this website for a client and they wanted an interactive graphic. The graphic they gave me is below.

overview-crop
overview-crop1604×1131 263 KB
. They wanted to other images to appear when hovering over one of the icons. I had to make “fake” buttons out of divs and link a hover interaction with them. Considering these buttons are all over the image, I need help to keep the buttons in the same spot as the image when it gets sized down.

Here is my site Read-Only: LINK
https://preview.webflow.com/preview/accountabill?utm_medium=preview_link&utm_source=designer&utm_content=accountabill&preview=8f7282c6a662f2f5e6c3e36b0366e776&pageId=5f962438240e1458b4d57200&mode=preview
(how to share your site Read-Only link)

2

hi @kieferrvestal,

The best way to make a custom animation on each element is to create the custom layout of the infographic with web elements (divs) The main issue you will encounter is that ovals are not so responsive.

Are you able to change it to a circle?

3

Hello, @Carlos_Ruiz_Del_Vizo

Unfortunately this graphic was given to me by the client and this is how they want it. In my read-only link I have a custom layout of div circles to trigger the animation.