Overlay image loses link after transition

Archetypon
1

Hi folks,

I’m using an overlay to slide a description panel over an image on hover. Problem is I have set the image to link to a page but when the new panel (set to cover) slides in over the image, the link is not working.

How can I keep the link active?

Here’s the same thing working in Foundry, click on the projects link and hover over the lady in the white t-shirt https://reesandcompany.co.uk/dev/

Thanks
R

2

Not at a computer at the mo, but can you add a link to the overlay?

3

Hmm. I can add a link to the text, but really I need the whole overlay to be a link and there’s no option to do that. I’ll see if I can find any kind of container that I can set to cover that also allows a link.

4

I’ll be at my computer soon, I’ll see if there is a simple solution. I suspect the answer is to just use a custom class, but I’ll have a dig around and let you know.

Worth mentioning that while these overlay effects look Ok on desktop, on mobile they typically don’t work, or work in an unexpected way. I tend to avoid any mouse-over effects on sites that get the usual range of traffic, as in, at least 50% on a mobile device.

5

Great! Many thanks Steve

6

Quoting the above edit in case you missed it.

1 Like
7

Actually that’s a really good point! I’d forgotten about the crazy on-off-on-off overlay activation when scrolling on a mobile… OK, in that case, problem is solved, I’ll just slide the overlay over a small portion of the image and thus leave it clickable… I’ll then try and explain that to the client :-)

Thanks Steve

8

Just tell him to visit the site on a mobile, clients soon get it then.

A solution is to use @tav section pro and section box, as he’s thought about the problem and offers you the option to show the end state.

But really, imo nowadays the best solution is as you’ve done, just avoid using them for critical content, like links and stuff.

1 Like