Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
HeartAndDash

How can I change the style of my caption overlay on hover?

Question

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 by HeartAndDash

Share this post


Link to post

21 answers to this question

Recommended Posts

  • 3

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

Share this post


Link to post
  • 1

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!

Share this post


Link to post
  • 1

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!).

Share this post


Link to post
  • 1

@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!

Share this post


Link to post
  • 0

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 by Vexsoft
Initial Revision

Share this post


Link to post
  • 0

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




Share this post


Link to post
  • 0

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:

alt text

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:

alt text

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

screen-shot-2018-11-09-at-74651-pm.png.ef456074150577796eb41196b5f46d84.png

screen-shot-2018-11-10-at-21229-pm.png.1e322e3c3c8300f4835785f640f639c0.png

Share this post


Link to post
  • 0
Posted (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 by Evahill
Initial Revision

Share this post


Link to post
  • 0
Posted (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 by Evahill

Share this post


Link to post
  • 0

@stemberdesign I was able to solve for this by adding a line for 'max height'

.image-caption-wrapper { max-height: 100% !important; }

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...