Changing z-index with interaction

Design help Animations & Interactions
1

Hi,

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])

2

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

Related wishlist:
https://wishlist.webflow.com/ideas/WEBFLOW-I-214

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.

3

Hi,

to be more specific:

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

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

Example:

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

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

CSS

.box{
  height: 100px;
  width: 100px;
}

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

.z_1000{
  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). https://www.w3schools.com/cssref/pr_pos_z-index.asp

5

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

6

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

7

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.

8

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

``

1 Like