Mouse hover animation not allowing me to click image

Design help General
1

Hey Community,

I’m still fairly new to Webflow and my biggest challenge is layout/positioning of elements. I implemented a hover animation on a CMS gallery that works with a div block. The hover effect works perfectly; I can hover and see the image overlay, but that stops me from clicking on the image. I’m not sure if this is because of positioning of the div block? However, when I hide the div block, which also stops the hover animation I am able to click the images and get the desired effect. I’d like to hover, see the animation and simultaneously click on the image. I’m sure this is possible as I’ve seen it on other projects, but I’m not sure how to do it on mine.

The issue arises on the ‘DOPE Collection’ page of my website and I’ve attached a video to show what happens. Any help is greatly appreciated!

Here is my site Read-Only: LINK
Here is the video of the issue: LINK

2

Any ideas on this? I don’t know if it’s a layout or positioning issue.

3

Any help at all is appreciated! Even ideas/thoughts/advice. I’m open to anything :grin:

4

Hi Kizzle,

I don’t see the section you refer to on the DOPE Collection page :confused:

5

Sorry I was making some changes a few hours ago, try again @avivtech

6

Can you share a link to the published site?

7

Yes, sure. The issue is shown at the bottom of the page here. Just hover over the images and you’ll see you can’t click on them.

8

So, the overlay is interfering with the magnific-popup.js magnifying action.
You can bypass that by adding pointer-events:none to the overlay class.

9

Where would I add that? Is that in the style settings of the class? Thanks for your help by the way!

10

Add that as custom CSS in the page settings, inside the <head> tag between the <style> tags

.img-overlay.dope {
   pointer-events:none;
}
11

Ah, makes sense. I’ll do that right now and let you know if it’s the solution.

Update: That worked! Thanks so much @avivtech.

1 Like