Z-index in columns

[srifrance]

Hi,

I have 4 columns, and a zoom effect interaction one each column.
The issue is : when there is the Zoom effect, i want the column on the first plan.
Some of the columns are not on the first plan when it zooms. Please see the picture attached and the site here : https://www.ppsri.com

Thanks for the help !
Marie

[ruenel]

Hello Marie,

Thanks for posting in! I have checked your page. Please make sure that all of the columns have the same z-index value of at least one. And then, set the overflow to visible. Do not apply the effects on the column itself, you will have to use an extra Div element as a container of all the elements inside the column. It is then in this Div element that you will apply the effects.

Incorrect to have this:

Column (has the zoom effect)
   Image 
   Text
   Text
   Button

It is best that you have this column layout structure:

Column (set the overflow to "visible")
   Div (has the zoom effect)
       Image 
       Text
       Text
       Button

Hope this makes sense.

[srifrance]

Hello!
Thank you for your quick answer.
I think I have done everything you told but it still doesn’t work… I don’t know why.
Maybe I did wrong somewhere ?
Marie

[tristup]

Hi Marie,

I would request you please provide login credentials for your site in a secure note to examine the settings you made. The credentials should include:

– WordPress Site URL & Login URL
– WordPress Admin username/password
– Specific page where you have this structure.

To create a secure note, click the key icon underneath any of your posts.

Thanks

[srifrance]

Hi,
thank you, I put the information under my previous post.
Thank you
Marie

[ruenel]

Hello Marie,

I have logged in and check your page. Even if we wrap the elements with a DIV, it is still behaving the same. I’ve look around the forum and this old thread, (Column hover effect) seems like the same issue. We can refer to this old thread and use a custom CSS instead. In the old thread, it is using .team .x-column:hover, in your case, you can use an inline element CSS added to the section instead.

$el .x-col:hover {
  z-index: 5;
}

Adding this in the section should make sure that the z-index of the hovered column will be on top of the other columns.

Be advised that this is just an example code. You will have to implement and make sure to maintain this code especially after every WP, theme or plugin updates.

Best Regards.

[srifrance]

Hello,
Thank you very much for your help !
Kind regards
Marie

[tristup]

Hi Marie,

Glad that we are able to help you.

Thanks