How to nest rollover images?

New Here ,
Mar 14, 2018 Mar 14, 2018

Copy link to clipboard


Hi All,

I originally built a state button that upon rollover, would darken, and make some text/hyperlinks become visible.

This was done by selecting the text/hyperlinks in the button, and setting the Normal Alpha to 0%, then setting the Rollover Alpha to 100%.

The hyperlinks effectively have their own rollover actions defined within the hyperlink settings (underline on rollover/hover etc).

Gif of how the setup works when using Text objects in state button. Notice the links become visible when the background is in its rollover state, and have their own 'rollover' actions.

Using Text.gif

Because of some platform restrictions I'm working within, I can't effectively make use of the 'fluid/responsive' design settings to handle the resizing/scaling of the page (it leads to very unintentional behavior).

What I have found is that if I use a static page size in design, images will scale more or less correctly with the page - but text will not (seems to e intentional behavior per this thread: How to make text font size reduce responsively | MuseThemes Forum )

So because images scale correctly, I'm looking to switch all my text that has state changes into buttons/images.

I have all my text built out as a Normal state and a second image for Rollover state, and I have added them to the page using a State button.

So if I hover over any text-image, it will switch from the normal image to the rollover image which is good.

What I am trying to figure out now, is can I nest these rollover images (the text) in my background images which also have rollover actions.

Background button: Rollover switches to a darker image, and reveals text-buttons

Text-Buttons: Hidden until the background image is in rollover state, they themselves switch image when rolled over.

Here's a gif of the behavior using text-images. You can see the background darkens on rollover, and the text-images become underlined on rollover.

But how can I get the text-images to be hidden until the background enters its rollover state (similar to the behavior in the gif above when using text itself)?

Links not hidden.gif

I can't figure out how to make the links images become visible once the background enters its rollover state.

If I select the link image, and set its rollover state alpha value to 0, it stays hidden until you actually hover the image itself (not what I want).

Should I be using something besides a 'state button' to achieve this?

It seems like it'd be doable - just not sure how.

I also tried using System Fonts, so it would render as an image.

This allows the links to hide until the background is in rollover state, but I couldn't find a way to then give the text a separate rollover action (unhide when background is rolled over, underline with text is rolled over).







Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
no replies

Have something to add?

Join the conversation