Image Clickthrough URL not working with hover

Site URL: https://gentlewisdom.squarespace.com/

Hello,

I added some custom css to have an overlay appear upon hover of my image (attached screenshot). The caption text links to another page on my site. If the user clicks anywhere on this block I want it to link to the page, but right now only the text is linking despite adding a clickthrough URL on the image options window. I'm pretty sure this is because of the css to display a colored overlay over the image upon hover. Is there any workaround to get the whole overlay or image to link? Or is this just an either/or situation. Thanks for any help in advance.

I am having a similar issue with the caption overlays. I made them such that they cover the image on hover but then the image not clickable. I will respond if I figure something out which might help here.

.image-caption-wrapper * {
    display: table;
    width: 100%;
    height: 100%;
    margin: auto !important;
}

.image-caption-wrapper a {
    display: table-cell !important;
    vertical-align: middle;
}

Did you get this figured out?

On 7/25/2020 at 3:55 AM, digitalsuperhero said:

I am having a similar issue with the caption overlays. I made them such that they cover the image on hover but then the image not clickable. I will respond if I figure something out which might help here.

9 hours ago, maggierae said:

Did you get this figured out?

 

Can you share link to page where you used image? We can take a look

You can add the following javascript code to handle this:
 

(function () {

  addPolyfills();

  if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  function init() {

    var imageWrappers = document.querySelectorAll('.image-block-outer-wrapper.layout-caption-overlay-hover');
    imageWrappers.forEach(function(wrapper){
      wrapper.style.cursor = 'pointer';
    });

    delegate(document, 'click', '.image-block-outer-wrapper.layout-caption-overlay-hover', function (evt) {
      var link = evt.target.querySelector('a');
      if (link) {
        link.click();
      }
    });

  }

  function delegate(target, eventName, selector, handler) {
    target.addEventListener(eventName, function (event) {
      if (matches(event)) {
        handler(event);
      }
    });

    function matches(event) {
      const element = event.target.closest(selector);
      return element !== null;
    };
  }

  function addPolyfills() {
    
    if (window.NodeList && !NodeList.prototype.forEach) {
      NodeList.prototype.forEach = Array.prototype.forEach;
    }

    if (!Element.prototype.matches) {
      Element.prototype.matches = Element.prototype.msMatchesSelector ||
        Element.prototype.webkitMatchesSelector;
    }

    if (!Element.prototype.closest) {
      Element.prototype.closest = function (s) {
        var el = this;

        do {
          if (Element.prototype.matches.call(el, s)) return el;
          el = el.parentElement || el.parentNode;
        } while (el !== null && el.nodeType === 1);
        return null;
      };
    }
  }
})();

Be sure to include the JS code in between <script> tags, e.g:

<script>
  // Insert JS code here
</script>

See article on how to add JS code https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-HTML-CSS-and-JavaScript

I am having the same issue. I have tried it with a gallery block and image block.

I tried adding the JS from @jpeter but that didn't work. 

I know I could just add the link as the overlay caption as OP has done, but I want static text underneath the image, not on the overlay, and just have a blue colour overlay on the image on hover. Can anyone help?

https://mouse-trout-epjy.squarespace.com/members 

password: spong123

On 11/3/2020 at 9:09 PM, spongebob-smc said:

I am having the same issue. I have tried it with a gallery block and image block.

I tried adding the JS from @jpeter but that didn't work. 

I know I could just add the link as the overlay caption as OP has done, but I want static text underneath the image, not on the overlay, and just have a blue colour overlay on the image on hover. Can anyone help?

 

https://mouse-trout-epjy.squarespace.com/members 

password: spong123

Can you remove code you used? We can give the CSS.

On 11/4/2020 at 2:45 PM, tuanphan said:

Can you remove code you used? We can give the CSS.

Was there a solution for this - I'm looking for the same thing.

11 hours ago, RealmsandRealms said:

Was there a solution for this - I'm looking for the same thing.

If you share site url, we can check easier

11 hours ago, tuanphan said:

If you share site url, we can check easier

Hey, that would be fab if you could - it's in build at the moment - https://trout-wombat-gmd9.squarespace.com/your-project - password: testing - the summary blocks are fine but the sections like loft extensions - will highlight but it's hiding the link presumably still underneath. Thanks.

On 12/16/2020 at 4:19 AM, RealmsandRealms said:

Hey, that would be fab if you could - it's in build at the moment - https://trout-wombat-gmd9.squarespace.com/your-project - password: testing - the summary blocks are fine but the sections like loft extensions - will highlight but it's hiding the link presumably still underneath. Thanks.

Add to Home > Design > Custom CSS

/* enable click */
body#collection-5fcaa11867453b32ebba7c40 figcaption.image-caption-wrapper {
    pointer-events: none;
}

28 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS

/* enable click */
body#collection-5fcaa11867453b32ebba7c40 figcaption.image-caption-wrapper {
    pointer-events: none;
}

 

You're a magician! Thank you so much. 

On 12/17/2020 at 10:15 PM, RealmsandRealms said:

You're a magician! Thank you so much. 

I see on tablet, some rows have 4 items/row, seems small. Do you want to change to 2 items/row?

eg. https://trout-wombat-gmd9.squarespace.com/your-project

It has also long content on mobile. You can consider adding a back to top button.

Hello! I have a similar issue. I have no experience in CSS but I've been finding some code via google and youtube. I am trying to make my image blocks have a caption when hovering over, and users should be able to click the image to go to a specific page on my website. Unfortunately the code is not permitting click through. What should I do?

This is the page I am working on: http://lolascottart.com/test

/* enable click */
body#collection-5fcaa11867453b32ebba7c40 figcaption.image-caption-wrapper {
    pointer-events: none;
}
//-- make the overlay transparent, and cover the image
.layout-caption-overlay-hover .image-caption-wrapper {background:transparent!important; min-height:100%; top:0!important;}

//--change the color of the text
.layout-caption-overlay-hover .image-caption-wrapper h1, .layout-caption-overlay-hover .image-caption-wrapper p{color:	#ffffff!important;}

.image-caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.sqs-block.image-block .image-caption-wrapper p{ font-size: 16px !important;}
.sqs-block-image .image-caption p {  font-size: 16px; font-weight: 100 !important;  font-style: normal;  color: #ffffff;  line-height: 0.00em;}
.image-caption-wrapper {
  overflow: hidden !important;
}

.image-caption-wrapper {
  overflow: hidden !important;
}

.image-caption a {
  display: block;
  padding: 100em;
  margin: -100em;
}

On 1/25/2021 at 9:15 PM, lobot said:

Hello! I have a similar issue. I have no experience in CSS but I've been finding some code via google and youtube. I am trying to make my image blocks have a caption when hovering over, and users should be able to click the image to go to a specific page on my website. Unfortunately the code is not permitting click through. What should I do?

 

This is the page I am working on: http://lolascottart.com/test

 

/* enable click */
body#collection-5fcaa11867453b32ebba7c40 figcaption.image-caption-wrapper {
    pointer-events: none;
}
//-- make the overlay transparent, and cover the image
.layout-caption-overlay-hover .image-caption-wrapper {background:transparent!important; min-height:100%; top:0!important;}

//--change the color of the text
.layout-caption-overlay-hover .image-caption-wrapper h1, .layout-caption-overlay-hover .image-caption-wrapper p{color:	#ffffff!important;}

.image-caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.sqs-block.image-block .image-caption-wrapper p{ font-size: 16px !important;}
.sqs-block-image .image-caption p {  font-size: 16px; font-weight: 100 !important;  font-style: normal;  color: #ffffff;  line-height: 0.00em;}
.image-caption-wrapper {
  overflow: hidden !important;
}

.image-caption-wrapper {
  overflow: hidden !important;
}

.image-caption a {
  display: block;
  padding: 100em;
  margin: -100em;
}

 

The url doesn't exist. Can you check again?

Hello! I'm having the same problem, I would like my images to have captions when hovering over, and be able to click the images to go to a specific page on my website. Anyone who can help me?

https://www.majakarlstrom.com/brllop

On 1/26/2021 at 5:15 AM, lobot said:

Hello! I have a similar issue. I have no experience in CSS but I've been finding some code via google and youtube. I am trying to make my image blocks have a caption when hovering over, and users should be able to click the image to go to a specific page on my website. Unfortunately the code is not permitting click through. What should I do?

 

This is the page I am working on: http://lolascottart.com/test

 

/* enable click */
body#collection-5fcaa11867453b32ebba7c40 figcaption.image-caption-wrapper {
    pointer-events: none;
}
//-- make the overlay transparent, and cover the image
.layout-caption-overlay-hover .image-caption-wrapper {background:transparent!important; min-height:100%; top:0!important;}

//--change the color of the text
.layout-caption-overlay-hover .image-caption-wrapper h1, .layout-caption-overlay-hover .image-caption-wrapper p{color:	#ffffff!important;}

.image-caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.sqs-block.image-block .image-caption-wrapper p{ font-size: 16px !important;}
.sqs-block-image .image-caption p {  font-size: 16px; font-weight: 100 !important;  font-style: normal;  color: #ffffff;  line-height: 0.00em;}
.image-caption-wrapper {
  overflow: hidden !important;
}

.image-caption-wrapper {
  overflow: hidden !important;
}

.image-caption a {
  display: block;
  padding: 100em;
  margin: -100em;
}

 

On 3/5/2021 at 12:00 AM, MajaKarlstrom said:

Hello! I'm having the same problem, I would like my images to have captions when hovering over, and be able to click the images to go to a specific page on my website. Anyone who can help me?

 

https://www.majakarlstrom.com/brllop

 

Hi. Which images?

Hi! I'm trying to get to the same effect as mentioned above (I've added a text hover state over the blue images at the bottom of the home page - not perfect (it expands a bit too far it seems sometimes), but that part works.

Now what I'm trying to get done is the actual blocks to link to the links I provided with it.

Site: www.nogabags.com

The custom CSS I've used (via youtube/forum etc) for the hovers is:

.image-caption-wrapper {
 text-align: center !important;
 top: 0 !important;
 background: rgba(144,162,203,1) !important;
  min-height: 100%
}

.image-caption {
 left: 50%;
  top: 50%;
 position: absolute;
 -webkit-transform: translate(-50%,-50%);
 -ms-transform: translate(-50%,-50%);
 transform: translate(-50%,-50%);
   }

When I now hover I do see the hand hover icon, but it does not send me to the link / seems not clickable.

Anyone who has a suggestion how to make this actually link?

On 4/30/2021 at 3:23 AM, Noortje_lw said:

Hi! I'm trying to get to the same effect as mentioned above (I've added a text hover state over the blue images at the bottom of the home page - not perfect (it expands a bit too far it seems sometimes), but that part works.

Now what I'm trying to get done is the actual blocks to link to the links I provided with it.

Site: www.nogabags.com

The custom CSS I've used (via youtube/forum etc) for the hovers is:

.image-caption-wrapper {
 text-align: center !important;
 top: 0 !important;
 background: rgba(144,162,203,1) !important;
  min-height: 100%
}

.image-caption {
 left: 50%;
  top: 50%;
 position: absolute;
 -webkit-transform: translate(-50%,-50%);
 -ms-transform: translate(-50%,-50%);
 transform: translate(-50%,-50%);
   }

When I now hover I do see the hand hover icon, but it does not send me to the link / seems not clickable.

Anyone who has a suggestion how to make this actually link?

try add pointer-event none to this code

.image-caption {
 left: 50%;
  top: 50%;
 position: absolute;
 -webkit-transform: translate(-50%,-50%);
 -ms-transform: translate(-50%,-50%);
 transform: translate(-50%,-50%);
pointer-events: none;
   }

Has anyone found a solution to this lately (now 2022) - as its something I'm struggling with now? None of these seem to fix it for me.

I have four inline images (Not a gallery). Each image links to its own section. But I've customised the hover to show the caption on hover with a semi transparent black box covering 100% of the image so the caption shows up.

But the link doesn't work now. There is a guide on Squarespace for this for 7.1 but its is out of date - the elements aren't there anymore!

I've tried adding the 'pointer-events: none' but that doesn't work...

Its a shame because the default hover bar is stylistically abit rubbish :/

Thanks for any ideas!

20 minutes ago, DianeEliz said:

Has anyone found a solution to this

This is an old thread that covers many different requests, so it's difficult to know what you are trying to solve. 

I recommend you post a new question describing the problem and ensure you provide us with a link to the page on your site so that we can take a look.

Hi Paul - I'm trying to start a thread - I see it wants a tag but doesn't seem to add my tags or tell me if its all ok to add or has added the thread.?

Sorry - I'm new!

Thanks

1 hour ago, DianeEliz said:

I see it wants a tag

Yes, forum posts require a tag. If you're not sure which one to choose, "Squarespace" is always a good choice 🤣