Jump to content

Image Clickthrough URL not working with hover

Recommended Posts

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.

Screen Shot 2020-06-22 at 1.35.25 PM.png

Link to comment
  • 1 month later...
  • 4 weeks later...

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.

 

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

Edited by jpeter
Link to comment
  • 2 months later...

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

Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...

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;
}

 

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...

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;
}

 

 

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...

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?

Edited by Noortje_lw
Link to comment
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;
   }

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...

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!

 

Link to comment
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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
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 🤣 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.