Forum Discussion
Hover button
If you really need to achieve this, you could work around it with JavaScript by temporarily raising the caption’s position using z-index when the button is hovered, then restoring the original z-index once the button returns to its normal state (attached).
That said, there are many reasons why this approach may create more problems than benefits, as JudyNollet and PhilMayor pointed out in their comments, and their reasoning makes perfect sense. If you are not comfortable with JavaScript, or you are not familiar with modifying code, working with z-index, and managing element stacking behavior, I would not recommend this solution. In that case, it would be much better to place each caption on separate layers, as suggested by Phil and Judy.
How objects overlap if they intersect is based on the order they appear in the Timeline.
Here are your three buttons rearranged to overlap. Rectangle 3 (the red one) appears above the other two because it is at the top of the Timeline. Rectangle 1 (the blue one) appears under the red and purple (2) rectangles.
The captions are part of each rectangle. So they will overlap in the same way. In other words, you can't make those captions appear above any rectangle that is higher on the Timeline.
Instead of inserting a caption into the Hover state, you could show a layer with the caption.
Note, though, that it is not accessible to put unique content into Hover state. Those who navigate with a keyboard or who are using a mobile device can't "mouse over" anything. So they'd never be able to view that caption.
I suggest you reconsider how to present the content so folks won't miss anything if they can't hover.