Hover state object appears behind base layer object

I have several screenshot images side-by-side on a slide (to mimic the ribbon in MS Excel). Each screenshot image has a Hover state where the image is enlarged to make it easily visible.  However, when I preview the slide and hover my mouse over the screenshot, the enlarged hover image appears behind the other screenshots on the base layer that are beside it.   How do I ensure that the Hover state of my object displayed above the base layer objects?    Is there a workaround?

Any help is appreciated.  Thanks!

11 Replies
Tracey Neil

Here's an example mock-up using a ribbon within MS Excel as my example (for privacy reason I can't share the actual ribbon images from my in-house software).   The idea is that the ribbon itself is the menu of the module.   Given how long the ribbon is, the icons may be hard to read so I've added a hover state to all the icons that zooms in and makes the icon legible.  Then the user can click on the icon to move to their desired page.

In the attached example, hover your mouse over Pictures, Online Pictures and Shapes to see the problem that the zoomed-in Hover state appears behind the screenshot images of the other icons.  Users may hover over the icons randomly.  How do I make the hover state images appear above every other image?  If this doesn't work, any ideas on how to get the same zoom-in/menu effect with another approach?

Glenn Jones

Hi Tracey

I see what you mean.  I've had a play with it and think I've solved your problem.

I took the three buttons you'd created and added them to an individual layer, then removed the Hover and Down states from the base layer.

I changed the trigger of the buttons on the base layer to show a corresponding layer when you hover the mouse over each one, and set it to restore on mouse leave.

On each corresponding layer, I set the default state of the button I copied to Hover, and the trigger to navigate to the desired page is on the button within the corresponding layer, rather than the base layer.

Hopefully that makes sense?!

On the face of it, it looks like it's behaving the way you want it to...I don't know if this is the "neatest" solution, nor do I know why the states don't work as you had intended them to (I would've done it the same way).

Hopefully this has helped :)

joe Skillington

Yet another work around. Not actually solving the problem that is at hand. Not having a go at Glen, he is doing the best he can with what he has. Articulate is full of glitches and errors. The paying public is basically BETA testing this software. I have the same problem as Tracey but cannot use layers. Can anyone inform me of how to do this, thanks. PS - RANT over, Joe

Ashley Terwilliger

Hi Joe, 

Thanks for posting here. It seems that in the example shared by Glenn and Tracey above, everything is working as designed in that if object A sits in front of object b, when you  hover over object B it'll still be behind object A. Depending on how large all the objects are, you could look at ensuring the "hover" elements are outside the range of object A.  I'll defer to the community in regards to other design workarounds that would allow you to have this set up without using layers. 

If there is anything else I can assist with, please feel free to let me know.