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.

Website:
https://preview.webflow.com/preview/first-animations-project-a98991c0e2509d?preview=4b36c3a2e55efdaca4e14ccfd633c582

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: https://webflow.com/website/Expanding-Columns-on-Hover-IX-2

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:

1 Like