January 2, 2019 at 5:25 pm #1049323
For my hero images, I created an image overlay within the ALB’s color section, have it set to full-screen and have placed a background image in it as well. You can see what it looks like from the interior pages of the site. The challenge I face is with the the homepage hero image. Right now you will see I am not using the image overlay. The reason for this is because the GET A QUOTE button won’t work with the image overlay set due to its positioning (z-index); it stis behind the image overlay and is not clickable. I have tried adding z-index to the button so that it sits above the overlay and is clickable – but no luck. The homepage overlay is currently deactivated since the button won’t work, but I can activate it once I hear from you so that you can see for yourself. The link is below. This is a CSS issue. So just wondering if you had any input. Thanks!January 3, 2019 at 6:50 am #1049496
The height of the overlay image should be less than the button position or else the button cannot be clicked. Since the button is a child element the parent will always have a higher z-index.
A simple workaround is to combine both the images the frame + background and make it a single image and use it as the color section background :) by doing this the button will be clickable but may be the parallax effect might not work.
VinayJanuary 3, 2019 at 3:42 pm #1049621
Hi Vinay, I may have tried that workaround before. And I agree – the parallax wouldn’t work. It created some challenges on mobile as well. I want to avoid relying on the Layer Slider. I can try to combine again, and see what happens.January 3, 2019 at 4:42 pm #1049639
hm – can not reproduce your problem.
You can see here that there is a background-image of the color-section with an overlay image ( and even with an opacity of 0.8) the button stayes active.: https://webers-testseite.de/ostler/justin/
you see the source code has content in av-section-color-overlay-wrap container – but the overlay image concerns to av-section-color-overlay container which is before the container with content.
Edit : ok – i did not see that you have set it to parallax.
I will see what happens.
Edit edit: it is still clickable that button.January 3, 2019 at 5:05 pm #1049646
It’s fine. Just had to add the overlay in PhotoShop. And cannot use the background overlay img ‘dots-mini-light.png’January 3, 2019 at 5:15 pm #1049651
hm – you see on my testsite that i used an own overlay image – i do not know why there should be a difference what image i take.
See testpage again
?January 3, 2019 at 5:30 pm #1049660
I removed usage of dots-mini-light.png overlay from the hero images.
Keep in mind that if I include the texture in the actual image, then to use your built-in overlay ‘dots-mini-light.png’ also impacts the white texture on the image….taken it from white to dark. So it doesn’t blend into the site’s body below the hero image – which is white. Does that make sense? I deactivated the dots-mini-light.png…overlay and have the hero image with the texture in it for the homepage. It works fine for me: tacticallawnsnow.com
Thank youJanuary 3, 2019 at 6:38 pm #1049677
i see that you are using the boxed-layout – maybe this and your “flakes” come into conflict with it.
these “flakes” got a z-index of 999999 – sometimes it helps if you give to those pngs an overflow : visible (maybe an important is neccessary)
Can you please insert the overlay image again – and i will see on your site then the source code what happens?
January 4, 2019 at 4:18 pm #1050023January 4, 2019 at 5:11 pm #1050048
- This reply was modified 1 year, 9 months ago by Guenni007.
sorry – yes please – i can not reproduce the things you have set in your environment.
maybe you can take a copy of your landingpage and post.
i will see if it is possible to achieve.January 4, 2019 at 5:21 pm #1050056
Good idea … So with the original image in place (meaning it’s not combined with the white texture) – and with the texture overlay….you will that the button itself cannot be clicked.January 4, 2019 at 6:06 pm #1050075
but think of : i’m participant as you – so i can not see links in private content field.January 4, 2019 at 6:18 pm #1050078January 4, 2019 at 10:20 pm #1050107January 4, 2019 at 11:01 pm #1050117January 5, 2019 at 5:47 pm #1050355
I’m circling back to this. While the above works, I’m now facing an uncommon challenge (which is fine and all)… but the client uses OPERA. And apparently the ID #snow::before doesn’t work because the button doesn’t work in OPERA.
Is OPERA even supported?
January 7, 2019 at 7:27 am #1050791
- This reply was modified 1 year, 9 months ago by Justin.
Depends on which version of the browser your client is using.
Please check this link https://caniuse.com/#search=%3A%3Abefore
please check if the paddings and margins are same in Opera sometimes if it is rendered differently the button may be under the png image.
You must be logged in to reply to this topic.