Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
  • #1049323

    Hey guys,
    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!


    Hey Justin,

    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.

    Best regards,


    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.


    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.:

    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.


    It’s fine. Just had to add the overlay in PhotoShop. And cannot use the background overlay img ‘dots-mini-light.png’


    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


    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:

    Thank you


    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?

    • This reply was modified 1 year, 9 months ago by  Guenni007.

    Hu Guenn i – you would like me to reactivate the overlay?


    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.


    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.


    but think of : i’m participant as you – so i can not see links in private content field.


    can you try this in quick css:

    #snow::before {
    	z-index: 1 !important

    Hey Guenn … a step in the right direction for sure. But I will need to remove the overlay seeting from ALB and darken the image in Photoshop 1st before uploading. SO that I can produce this: rather than this:


    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?

    • 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

    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.

    Best regards,

Viewing 17 posts - 1 through 17 (of 17 total)

You must be logged in to reply to this topic.