Issues with image shadow and section separators

[bartenderonduty]

Hi Themeco Team,

I currently have two issues with X.

1. I am running into trouble when trying to add a box shadow and 3D rotation to an image. To start, I’m applying the following CSS to an image and its container:

img {
transform: translate(0,-40px) rotate3d(.1,.500,0,20deg) rotateZ(-2deg);
box-shadow: 5px 25px 60px rgba(0, 0, 0, 0.7) ;
-webkit-box-shadow: 5px 25px 60px rgba(0, 0, 0, 0.7) ;
-moz-box-shadow: 5px 25px 60px rgba(0, 0, 0, 0.7) ;
}

column {
perspective: 1200px;
}

This CSS has helped me achieve the look in the attached screenshot, which is what I was going for.

Unfortunately, the box shadow is being cut off by another container… I’ve tried several possible fixes but haven’t had any luck yet. Can you suggest a solution that will allow the box shadow to expand beyond the container or at least not look like it’s cut off?

2. I’m also running issues with the “Angle In” section separators. As you can see from the screenshot, they are also cutting off the box shadow on the image. I’ve also been trying to get the section separators to layer UNDER the image so I can make the image float over the section above and possibly below. I’ve tried several possible fixes including tweaking the Z-index of every row and container, and applying custom CSS that I found in another help article (Image to dip into another row/section) but that didn’t work either. Closest I could get was setting a negative bottom margin on the top section, but that just pushes the separator up.

Can you help?

[ruenel]

Hello @bartenderonduty,

Thanks for writing in!

1.) The shadows were cut off because of the z-index of the separator. To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

2.) Please provide the url where we can find the separator on the page so that we can inspect the z-indexes of the section. Keep in mind that the z-index of the bottom section must be higher that the upper one.

Best Regards.

[bartenderonduty]

The shadows are also being cut off outside of the separators as shown in this screenshot.

[nabeel]

Hi @bartenderonduty,

Thank you for providing the URL. To fix the issue, either increase the left and right margins of the image element to e.g 75px currently it is 50px or change the blur level to 45px of the box-shadow property:

 box-shadow: 5px 25px 45px rgba(0, 0, 0, 0.7) ;
-webkit-box-shadow: 5px 25px 45px rgba(0, 0, 0, 0.7) ;
-moz-box-shadow: 5px 25px 45px rgba(0, 0, 0, 0.7) ;

Hope this helps!

[bartenderonduty]

Is there any way to accomplish this without adjusting the margins? When I increase the margins, it reduces the image size quite substantially.

Also, can you provide a solution to allow the image to hover over over the separators? I didn’t see any z-index settings for separators in the backend of X and custom CSS didn’t appear to have any affect on the position of the separators.

[ruenel]

Hello @bartenderonduty,

If that is the case, we will just force the overflow of the row to show up. To do that, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-section .x-row-inner {
    overflow: visible;
}

The code were added globally so that if you create another page with the same layout or effects, then it will just work automatically showing off the shadows with out cutting it out.

We would love to know if this has worked for you. Thank you.

[bartenderonduty]

This worked perfectly for the box shadows! Looks great.

@ruenel, can you please provide a way to fix the issue I’m having with the section separators too? I tried following this guide, Image to dip into another row/section, but doesn’t appear to work on my end. I can’t seem to adjust the z-index of the section separators with CSS. Below is a screenshot of the issue.

Thank you!

[lely]

Hi @bartenderonduty,

For sections, no need to use custom CSS. Z-index setting are available on section settings > Design Setup
Please make sure that this specific section z-index value is greater than the z-index settings of previous(top) and next(bottom) section.

Hope this helps.

[bartenderonduty]

Thanks for the response but this doesn’t help… Since the section separators are technically outside of the Section, they are not affected by the z-index settings of the Section.

Can you make another recommendation?

[christopher]

Hi @bartenderonduty,

Section separators will not work with images. It will work only with solid colors. I am afraid you will not be able to do anything regarding that and if you want to use images you should not use the separator feature.

Thank you for your understanding.