Click Through an Element

Design help Custom code
1

Hello!

I have a photo on my home page that I’d like users to be able to ‘click through’ an image and a div in my heart section. I’ve read up on some of the threads here about making this happen and I came up with this custom CSS code:

/* Click through Hero Photo*/
.click-through {
pointer-events: none;
}

I’ve tried adding this snippet to the head tag, the before body tag and an embed, but none of these seem to be yielding results.

Any ideas? The overlap occurs on desktop when the window width is shrunk. The Rent Our Venue button gets covered

Here is my site Read-Only: LINK

1 Like
2

You need to wrap that code in tags

<style>
.click-through {
pointer-events: none;
}
</style>

If you add an embed to your page and place code there rather than in the head you’ll be able to apply that CSS even in Webflow designer rather than only on published website. Make sure that you are styling the right class (just a suggestion as you didn’t send the preview link)

1 Like
3

My apologies, I should have mentioned, it was wrapped in style tags and I was previewing it on the published site!

4

Share your preview link, this way we are just guessing in the dark

5

Thank you!

6

@Optimus0087 Share a read-only link of your project from the Designer | Webflow Features

7

Whoops! I thought I added that to the initial post. Amateur move!So sorry about that!

https://preview.webflow.com/preview/ilcrc?utm_medium=preview_link&utm_source=designer&utm_content=ilcrc&preview=90b25bbe9c254ab0c90eeb8f859c4430&workflow=preview

8

I discovered the problem: I had the image in a wrapper that did not have the class applied. Everything functions as expected now!

1 Like