Hi, I’m developing a website for my family’s Typography business.
I want to include the historic background of the business as part of the UI and I thought of doing this by using physical assets (movable typographic types). I’ve translated those into pictures and made a menu bar design I’m happy with.
I’m running into an issue though: I want to animate the menu button, for this purpose I split the bar into four pictures with .png extension so they’re separate. However, if I do animate just the image representing the word “MENU” (MenuImage inside Read-Only) it will take an action whenever I click on the whole width of the menu bar.
I understand why it is happening, as the image doesn’t contain just the “MENU” portion of data but also the transparency part of it.
I’m looking for any possible solution. I’ve thought about removing the transparency and placing the picture manually but I highly doubt I’d be able to keep it responsive that way.
Halp pls, I’m in a no-way-out.
Here is my site Read-Only: https://preview.webflow.com/preview/museocontes-top-notch-project?utm_medium=preview_link&utm_source=designer&utm_content=museocontes-top-notch-project&preview=960086db2c2b552db2471d13f239084b&mode=preview