Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • January 2, 2019 at 5:25 pm #1049323
    Justin

    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!

    January 3, 2019 at 6:50 am #1049496
    Vinay

    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,
    Vinay

    January 3, 2019 at 3:42 pm #1049621
    Justin

    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
    Guenni007

    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
    Justin

    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
    Guenni007

    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
    Justin

    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 you

    January 3, 2019 at 6:38 pm #1049677
    Guenni007

    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 5 years, 10 months ago by Guenni007.
    January 4, 2019 at 4:18 pm #1050023
    Justin

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

    January 4, 2019 at 5:11 pm #1050048
    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
    Justin

    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
    Guenni007

    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 #1050078
    Justin

    oh!! :) https://tacticallawnsnow.com/test/

    January 4, 2019 at 10:20 pm #1050107
    Guenni007

    can you try this in quick css:

    #snow::before {
	z-index: 1 !important
}
    January 4, 2019 at 11:01 pm #1050117
    Justin

    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: https://tacticallawnsnow.com/ rather than this: https://tacticallawnsnow.com/lawn-care/

    January 5, 2019 at 5:47 pm #1050355
    Justin

    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 5 years, 10 months ago by Justin.
    January 7, 2019 at 7:27 am #1050791
    Vinay

    Hi,

    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.

    Best regards,
    Vinay

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • You must be logged in to reply to this topic.