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

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


HeartAndDash

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

Recommended Posts

  • 2

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

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

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

Link to comment
  • 0

@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
  • 0
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
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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