Hover image to be clickable

Hey!  I have just added the hover effect so that when you hover over an image, a second image appears.  I would really love the second image to be clickable or that whole section to be clickable.

I have used the following code in design > custom css to make the hover effect happen:

#block-0557efeb853081d6a937:hover {
    content: url(THIS IS WHERE MY SECOND IMAGE GOES);
}

Wondering if anyone knows how the image on hover linked? or the block "#block-0557efeb853081d6a937" - clickable?

Thanks in advanced!

What happens if you add a link to the image block settings? 

Hey @ReformDesign - I tried this but unfortunately it doesn't read as the hover effect takes over.  And the hover element / block isn't clickable 😞

Hello! I have just had to do the same thing for a website and found the solution here:

https://sirv.com/help/articles/hover-change-image/

A bit of a different approach to yours as you're putting the images into code containers rather than as a swappable block.

The <style> code must go into the advanced section of your page's settings rather than the css injection section.

And then you create a code block with the relevant image urls from your asset library (copy image address rather than the url for the image in your library) and the destination url you want to click to...

Maybe you've found a solution by now but hope this helps, if not you, someone else in future!

On 3/1/2023 at 3:01 AM, GPGDesigns said:

Hey @ReformDesign - I tried this but unfortunately it doesn't read as the hover effect takes over.  And the hover element / block isn't clickable 😞

Can you share link to page where you added Image Block with link? We can help easier