For my landing page, I have a couple of words that intersect. Just to keep it simple, let’s say I have the word “design” running vertically, and the word “me” running through it, crossing at the e. I want it so that when you hover over the word me, the d-sign of me drops to 50% opacity, and the me remains at 100%. I have this functionality, except that when you hover over the e, it switches to design at 100% and me at 50%. I think this is because I have design higher in the layers panel of my original component. Any workaround? Also not sure how well I explained this so I’m linking that part of my figma file as well.
I tried to remove the E and G and make them have no prototyping, but because of the system of swap overlays I’m using, it just reverts back to the “Load” frame.
I suppose it can’t detect if you’re hovering “me” or “design” or both, so it just applies the effect on the layer wich is on the top…
i suppose i would have done an autolayout with every letter , then i can set it vertical or horizontal, and i apply the prototype on the letters, not the whole word.
I think I did what you meant, and it works, but seems sort of clunky? Could you check the file and see if there is a better way to optimize the prototyping?
I added a page in your file (the share right’s allow edit for those with the link)
It’s the way i would have done it, with less elements.
I do appreciate the help, but it doesn’t seem to work. I didn’t explain it well, but the issue with yours is that at the crossing letters, it just brings both words to 100% opacity when the desired effect is to have those letters do nothing when a word is already being hovered. If the cursor moves from any part of design, to the g, which is shared with photography, nothing should change. Similarly, if the cursor moves from any part of photograhy to the g, shared with design, “photography” should stay at 100 while design remains at 50%.