HeartAndDash Posted January 9, 2016 Share Posted January 9, 2016 (edited) I am using the Bedford template and I would like to change the "caption overlay on hover" feature so that the overlay covers the whole image, the whole image is clickable, and I can customize the colors of text and the overlay itself. The default "caption overlay on hover" style is a small transparent gray bar that overlays the very bottom of the image. I searched everywhere for a cohesive snippet of custom CSS code, and while there are several partial answers, I have yet to see something that covers all of my wish list. I'll keep tinkering and report back! Edited January 9, 2016 by HeartAndDash Link to comment
HeartAndDash Posted January 9, 2016 Author Share Posted January 9, 2016 I got it the way I want it! To see this code in action, see Heart & Dash Portfolio. If you want this code to work, do not use an image grid. Instead, create your own 'grid' by simply inserting multiple image blocks. You'll insert this code by going to "Design" then "Custom CSS": .image-caption-wrapper { opacity: 0; text-align: center !important; top: 0 !important; position: relative; pointer-events: none !important; } &:hover, &:focus { opacity: 1; } .image-caption { left: 50%; position: absolute; top: 50%; width: 100%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .image-caption p { font-size: 18px !important; font-weight: semibold !important; color: #ea4e4c !important; text-transform: uppercase; line-height: 120% !important; letter-spacing: 2px !important; opacity: 1 !important; } .sqs-block.sqs-block-editable:not(.sqs-block-editing) .sqs-dd-invalid-handle { cursor: default; pointer-events: all !important; } .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper { background: #fddcce; opacity: .9; } The nice thing about this is that you can customize the color of the caption/type (I used #ea4e4c) that appears on hover and you can also customize the color of the background (I used #fddcce). You can customize those hex color codes for yourself. For me, this is a total solution! Link to comment
fiona.sloan Posted February 9, 2016 Share Posted February 9, 2016 Can't tell you how much I appreciate this information! One part of the code isn't working for me though -- I can't seem to change the color of the background on hover overlay, which may be in part because I see duplicate classes listed in the last code block, and because I think "intrinsic" is a class you added yourself? Any help would be greatly appreciated! You can see the issue on the top row of www.wanderlost.co/images (still in progress!). Link to comment
devonstank Posted April 21, 2016 Share Posted April 21, 2016 (edited) There are many solutions out there (some good and some bad), but you might want to do some Googling to find them. Basically, you need to write some custom Less (CSS) to change the styling of Squarespace's Image Caption Overlay on Hover effect. Ultimately, overriding Squarespace's default styling. Devon Stank @ Devonstank.com (Squarespace Tips & Tricks) Edited April 21, 2016 by Vexsoft Initial Revision Link to comment
belindalovelee Posted January 27, 2017 Share Posted January 27, 2017 Omgosh it worked for me thank you so much! I really appreciate it. Link to comment
Lucie307 Posted February 7, 2017 Share Posted February 7, 2017 Thank you so much for this! But I don't seem to be able to make the font size any bigger no matter what I do, can anyone help please?! Link to comment
wbuchina Posted May 9, 2017 Share Posted May 9, 2017 @starburst5654 Hi I was wondering if you were able to figure this out? I used @HeartAndDash css as well which worked perfectly except for my not being able to change the background color. Just wondering if perhaps you've found the answer. Thanks! Link to comment
sarahglenngirl Posted May 29, 2018 Share Posted May 29, 2018 how can i make the overlay background completely opaque with this code? Link to comment
kathleenphelps Posted July 3, 2018 Share Posted July 3, 2018 To change the background color use only .image-caption-wrapper in code line 39. The snippet below makes the overlay white .image-caption-wrapper { background: #ffffff !important; opacity: 1 !important; } joelyyael and NothingSomething 1 1 Link to comment
hannah2 Posted October 11, 2018 Share Posted October 11, 2018 This is no longer working, it is only showing up on half of my image, is this happening for anyone else? Link to comment
ericbyers Posted October 12, 2018 Share Posted October 12, 2018 @HannahWestergaard yes, same here Link to comment
Gigie_Hall Posted October 15, 2018 Share Posted October 15, 2018 @HannahWestergaard same here. Any luck figuring it out? Link to comment
Jared Posted October 17, 2018 Share Posted October 17, 2018 Same here. Hope someone can provide a fix. Link to comment
ericbyers Posted October 17, 2018 Share Posted October 17, 2018 @HannahWestergaard and @Bliss and Mischief I added the following to the bottom of my code and it worked! Let me know. .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover:hover .image-caption-wrapper { max-height: 100%; } Link to comment
Jared Posted October 17, 2018 Share Posted October 17, 2018 Wow, that works perfect for me. Thank you so very much! :) Link to comment
SavvyDesignCo Posted November 10, 2018 Share Posted November 10, 2018 OKAY. I am loving the look of your code! Right now, the code shows the image above and below the hover. I'd like that same feature on the left and right sides of the image when it hovers. Kinda so it looks like this: I'm also not sure how to change ALL of the font colors, I can manipulate the font colors that show in red but the rest stay a light cream? How do I fix that? See below: If I wanted to do this for a gallery block, is there another code I should use? Thanks in advance! I'm JUUUST starting to venture into code. :D Link to comment
christinobryan Posted November 20, 2018 Share Posted November 20, 2018 Thank you so much!!! Was having the same problem and appreciate the fix! Link to comment
stemberdesign Posted February 4, 2019 Share Posted February 4, 2019 This solution worked for me for a while, but now the hover box is only appearing over 2/3 of the box. Any idea how to resolve? (link to example of this issue: https://samstember.com/) Link to comment
Evahill Posted March 3, 2019 Share Posted March 3, 2019 (edited) Hi this is working for me but now it won't let me change the background color -- it's stuck at black. Any ideas? Thanks all. @ericbyers Edited March 3, 2019 by Evahill Initial Revision Link to comment
Evahill Posted March 4, 2019 Share Posted March 4, 2019 (edited) This worked but now it's not letting me change the background color... it's stuck on a black/grey. Anyone have any idea what's up? @ericbyers Edited March 3, 2019 by Evahill Link to comment
Guest Posted May 28, 2019 Share Posted May 28, 2019 @stemberdesign I was able to solve for this by adding a line for 'max height' .image-caption-wrapper { max-height: 100% !important; } Link to comment
sarahnoni Posted January 31, 2020 Share Posted January 31, 2020 On 3/4/2019 at 10:30 AM, Evahill said: This worked but now it's not letting me change the background color... it's stuck on a black/grey. Anyone have any idea what's up? @ericbyers To change the background color of the overlay, I discovered you need to use an RGBA color on the image caption wrapper like this: .image-caption-wrapper { background: rgba(188,120,53,0.75) !important; } Link to comment
Glencairn Posted March 26, 2020 Share Posted March 26, 2020 Was there ever a fix on this? I tried both approaches but neither allowed me to change my background colour. 🤔 Link to comment
tuanphan Posted March 26, 2020 Share Posted March 26, 2020 4 hours ago, Glencairn said: Was there ever a fix on this? I tried both approaches but neither allowed me to change my background colour. 🤔 If you share link to your site, I 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment