Streaming live at 10am (PST)

Changing z-index with interaction


I have a slide in that slides in from the right to left.

  • When inactive it should be behind the navigation bar.
  • When active it should be in fron of the navigation bar.

Is there a way to do this with interactions?
If not what would be a correct way with some custom code?

Here is my public share link: share link
([how to access public share link][2])

No way to change CSS Z-Index and/or toggle classes by webflow interactions (Yet).

Related wishlist:

In my opinion, it’s better (Very hard to debug class toggle - what happens is someone remove this class? “Chaos”). It’s better if webflow will add more options to animations (Like Z-index and so on).

For solution by code, you need to be more specific (On hover? click? Which element?).

The easiest way to by jquery toggleClass():

Minimal JS knowledge requires.


to be more specific:

  • Slide in panel should change z-index on mouse click of a certain button.

hh more specific. In JS we use the elements class (or id) selectors.


<div class="box" id="red">red box</div>
<div class="box" id="blue"></div>

<button id="toggle">Change Z-index of red box</button>


  height: 100px;
  width: 100px;

  background :red;
  color: white;
  background :blue;
  opacity: 0.8;
  position: relative;
  top: -20px;

  position: relative;
  z-index: 1000;
  border: 5px orange solid;

JS (paste before body):

$( "#toggle" ).click(function() {
  $("#red").toggleClass( "z_1000" );

Example (click run):

z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky).

Hi im looking for a similar solution. static img elements to change z axis on hover. any advice?

You can craft yourself a code to add a class on hover with Finsweet class-adder-script-writer.

But I assume you meant z-index instead of z axis.

Changing the z axis transform value is possible using IX. Changing z-index value is not.

thanks for your response, i was able to use the tool to create the desired JS


1 Like