Msucco Posted June 22, 2020 Share Posted June 22, 2020 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. Link to comment
digitalsuperhero Posted July 25, 2020 Share Posted July 25, 2020 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
rwp Posted July 25, 2020 Share Posted July 25, 2020 .image-caption-wrapper * { display: table; width: 100%; height: 100%; margin: auto !important; } .image-caption-wrapper a { display: table-cell !important; vertical-align: middle; } Link to comment
maggierae Posted August 21, 2020 Share Posted August 21, 2020 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
tuanphan Posted August 21, 2020 Share Posted August 21, 2020 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
jpeter Posted August 21, 2020 Share Posted August 21, 2020 (edited) 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 August 21, 2020 by jpeter Link to comment
spongebob-smc Posted November 3, 2020 Share Posted November 3, 2020 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
tuanphan Posted November 4, 2020 Share Posted November 4, 2020 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
RealmsandRealms Posted December 14, 2020 Share Posted December 14, 2020 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. Link to comment
tuanphan Posted December 15, 2020 Share Posted December 15, 2020 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
RealmsandRealms Posted December 15, 2020 Share Posted December 15, 2020 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
tuanphan Posted December 17, 2020 Share Posted December 17, 2020 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
RealmsandRealms Posted December 17, 2020 Share Posted December 17, 2020 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. Link to comment
tuanphan Posted December 21, 2020 Share Posted December 21, 2020 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
lobot Posted January 26, 2021 Share Posted January 26, 2021 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
tuanphan Posted February 2, 2021 Share Posted February 2, 2021 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
MajaKarlstrom Posted March 4, 2021 Share Posted March 4, 2021 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
tuanphan Posted March 7, 2021 Share Posted March 7, 2021 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
Noortje_lw Posted April 29, 2021 Share Posted April 29, 2021 (edited) 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 April 29, 2021 by Noortje_lw Link to comment
tuanphan Posted May 1, 2021 Share Posted May 1, 2021 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; } calibratedconcepts 1 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
DianeEliz Posted June 9, 2022 Share Posted June 9, 2022 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
paul2009 Posted June 9, 2022 Share Posted June 9, 2022 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. DianeEliz 1 About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
DianeEliz Posted June 9, 2022 Share Posted June 9, 2022 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 Link to comment
paul2009 Posted June 9, 2022 Share Posted June 9, 2022 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 🤣 About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment