Streaming live at 10am (PST)

Changing element z-index on mouseover


How do you bring an element to front when hovering the mouse over it? Or in other words: how do you change the z-axis of an element on mouseover?

For example when you hover the mouse on each of the four coloured blocks in the linked website, they expand a little. I’ve used an overly complicated technique to do this which isn’t an optimal way of doing it since it can get a little messed up for different browsers/devices.



Hi @Aram, at the moment the z-index can’t be changed from the interactions, however you might be able to do something using custom code.

Just a question, are you trying to change the z-index to avoid the content overlap, or what was the reason you are using z-index?

Here is a similar example, but not using any z-index:

I hope that helps.


That is exactly the way I want to do it. I knew there was a better way!

Thank you! :slight_smile: