Setting z-index of certain elements

[IRIMAGE]

Hello I would like to change “layer position” between two elements in same block. I have a line aligned to the bottom edge of text element but this line goes in front of text. I would like that line goes behind text. I can’t find setting on elements to change positions. (see attached image)

Help here would be very much appreciated
Thank you.

[marc_a]

Hi Peter,

Thanks for reaching out!

Would you mind sharing the page URL you are currently working on? so that we can check and give you some advice on how to attain your layout.

Thank you.

[IRIMAGE]

Hello, I will need your public IP adress so I whitelist it in .htaccess file.

Thank you and best regards,
Peter

[marc_a]

Hi Peter,

I suggest that you temporarily disable the restriction of your website because our support team is from a different part of the world and we can’t give you a static IP address.

Hope that helps.

Thank you.

[IRIMAGE]

Hello, you have access to dashboard.

this is the url/page that I would like to edit:
https://skode.merkur-zav.si/prijava-skode/spletna-prijava-skodnega-primera/

Best regards,
Peter

[IRIMAGE]

Also one more question. I like this animation on mouseover where column moves a bit to the top side and shadow extends downwards. (see image attached).

How can I achieve this effect? I can’t find this option in builder pro. I am not a programmer, so if this is achieved with some sort of a code, I would very much appreciate it.

Best regards,
Peter

[marc_a]

Hi Peter,

Thanks for providing all your details!

To make the gray line at the back of the text, you need to add a z-index to your text element. To do that, please check the text element and go to customize tab, and check the edit CSS.

Then add the CSS code below to all your text elements.

$el {
  z-index: 1;
} 

I applied the changes to the first column and please apply them to the rest of the columns.

On the other hand, to have hover effects like the example image above please add the code below in your columns then go to customize tab and edit CSS.

$el:hover {
      box-shadow: 0 2.8px 2.2px rgba(0,0,0,.02),0 6.7px 5.3px rgba(0,0,0,.028),0 12.5px 10px rgba(0,0,0,.035),0 22.3px 17.9px rgba(0,0,0,.042),0 41.8px 33.4px rgba(0,0,0,.05),0 100px 80px rgba(0,0,0,.07) !important;
    transform: translateY(-5px) translateZ(0) !important;
}

I applied this option to your first column, you may delete it or apply it to the rest of your columns.

Hope that helps.

Thank you

[IRIMAGE]

Thank you! It is working great!

[marc_a]

Hi Peter,

You’re welcome and it’s our pleasure to help you. If you have any other concerns regarding our theme features, feel free to reach us.

Thank you.