Layers and Animation

Animations
1

Hi all, can you create an animation and move the image hovered over to the front?
Right now i have all images grouped and animated to horizontal scroll and enlarge on hover. My problem originates from the layer system that organizes the content. Only the first Image (on top of all of them) looks how i want it to look. All the others are behind and in front of one another (see image).

Problem01.PNG
Problem01.PNG1606Ă—1264 101 KB

2

Ideally, you need to change the Z-index when hovering; it has to be done via code though.

I’m no code expert but managed to get it working using this example they have in their guide as reference and got it to work with Shapes. Steps I followed:

  • Adding an On Hover animation to each widget.
  • Grabbed the image ID. Check this if you do not know how to get the ID.
  • Added the snippet of code to the CSS part of the Code Editor.
  • This is what I used:
[data-id="PASTE WIDGET ID HERE"]:hover { 
  z-index: 400; !important;
}
  • Repeat for every widget.
3

hey, in general, this is the right way to approach this.

I´ll just add my two cents:
If you have animations assigned onto the images, RM will nest it inside a div with the name “animation-container”. For each animation like (scroll / hover / load / click) there will be an extra container div. If you add the “:hover - change z-index” css rule onto the data-id-div it might not work, as it is the only element inside this parent “animation-container” div. You might have to set the “:hover - change z-index” css onto the parent div, not your data-id-div, to have the z-index scope of your entire page. But with css it is not possible to adress a parent-div of a specific div, therefore you will need javascript or jquery to select the “parent” or “parent of parent” (regarding how many animations you have set up) of your data-id-div and assign the css z-index changing onto this div to work porperly.

1 Like