Bug with display of design cloud template "effect deconstruction"

[spedney]

I have been playing around with the “effect deconstruction” template today and noticed that it seems to have a bug with the interactive drop shadow effect - specifically on the first column…
When doing mouseover on the first column the drop shadow interaction appears behind the other two columns.
Though it might be a setting in my site conflicting so just set up a clean test site with only Pro and nothing else installed.
I’ll include the details in the secure note.

[ruenel]

Hello SteveE,

Thanks for writing in!

The mentioned issue is not happening in our template demo. You can compare it here:

• https://demo.theme.co/designcloud/content/effect-deconstruction/

The columns are both inline and with the same z-index value of 1.

The normal behaviour will be that the first column will always be behind the second column while the 3rd column will be on top of all other columns.

I suspect that there is a bug or missing configuration when importing the template as I was able to replicate this in my local testing server. In order to make sure that the column will always be on top as you hover the column, you can add this inline CSS in your section element inline CSS:

$el.x-section .x-col:hover {
  z-index: 2 !important;
}

Kindly check your page now.

[spedney]

Thanks!
Yes that seemed to fix it - adding in the section element CSS. I had also noticed it was not happening in your demo page, which is why I wanted to figure out what was wrong with my own one

[tristup]

Hi SteveE,

Glad that it fixed now, please let me know if you need any further help on this.

Thanks