Elements not ordered correctly with z-index

Design help General
1

Hi

I’m working on a slider but am having a bit of trouble with z-index and getting things in the right order. At the moment, I have slider cards with a couple of elements in the top-right and bottom-left corners of each card. These elements are meant to sit behind the cards. You can see the current situation with this link to the project.

The elements in question are the green circles and green dots. They have a z-index of 1, while the card background (class “testimonial background”) has a z-index of 2. Which I would have thought would make the card background go on top, right? I’ve done something wrong here as the green elements are actually on top, but I can’t work out what.

Here’s a link to the live preview of the site, which you’ll need to see rather than just previewing the page in Webflow (there’s some back-end stuff that needs the live preview to work).

Any help would be great! Thanks :slight_smile:

2

Hi Alex, a few things-

  • z-index can be negative. You might try that to push those art pieces backwards.
  • You might also consider restructuring your cards. It’s a bit easier to work with if your cards contains their contents- then the background color is naturally behind the text and you’re not fighting z-orders. I’d probably put your art bits inside the slide but outside of the card object to see if that works.

image

3

Thanks Mike :slight_smile:

I tried setting the z-index to -1 on the elements. It worked in the designer preview, but once I viewed the live site they were still in front of the cards for some reason. When I moved the elements outside of the card as you suggested, though, the z-index was fixed.

However, this caused a different problem. When the card is in focus, the elements are correctly behind it (i.e. the ordering is right). However, when you click to move onto a different card, things go wrong. The card itself and the text fade out and shrink, as expected, but the green elements do not. That gives a weird effect and makes the cards look like they have Mickey Mouse ears, which obviously is not ideal! Here’s an example of what I mean: https://claines-tuition-6e8dbff14f28ee2904455cf.webflow.io/

So being inside the card element is important for the transition effects. Not sure what the best solution is!

4

Just following up on this in case anyone else has an idea how to fix the z-index problem :slight_smile:

5

Hey @Waterish, I didn’t see your reply.
I don’t work with Interactions much, however it looks like you just need to change your targeting.

Here’s your slide structure
image

And here’s your on-slide interaction;
image

Note you’re targeting the class testimonial card for your effect, which does not contain the flair bits you’re also wanting to apply the effect to.

I’d try putting class on the slide itself, and targeting that instead. so that it contains all of your elements.

6

Hey @Waterish, sometimes weblflow has some interaction bugs, try to redo you animation and target correctly by class your elements. Good luck

7

Thanks for your answers @memetican and @Alex_Naroi. Can I just clarify something though? With this comment: “I’d try putting class on the slide itself, and targeting that instead”, which class do you mean? Right now, I’ve got the “slide” and “testimonial card” classes. Do you mean to put the “testimonial class” on the slide? If so, what should I do with the existing testimonial card div?

I tried moving the art elements outside the testimonial card and changing the target of the animation from the testimonial card to the slide, but the slide started behaving very strangely. Here’s an example of what happens.

Sorry that this is becoming quite fiddly. I feel like we are close to the solution though. Thanks for all your help so far.

8

I didn’t find an immediate solution for you but I think this is the direction you need to go to create the effect you want;

9

Thanks for taking the time to make the video, it actually fixed the problem! I’m not sure why, but for some reason the animation doesn’t show properly unless you view the live site. It doesn’t show the fading animation in preview mode. But when I tried your solution and viewed the live site, it worked perfectly :slight_smile:

Here’s the live site so you can see it working: https://claines-tuition-849e473b65ff43e48231976.webflow.io/

Again, I really appreciate you taking the time to make that video. Funny that such a small tweak can make all the difference, but that’s often the way!