Jump to content

Hover overlay color not changing

Recommended Posts

Site URL: https://sparhawk-lite-sarah-daye.squarespace.com/config


I have custom css that is working perfectly EXCEPT the color of the overlay on the hover is not changing from black. 

Here is the code I used.  

// Image Hover Styling

.image-caption-wrapper {
 color: rgb(255,255,255);
 opacity: 0;
 text-align: center !important;
 top: 0 !important;
  border: 2px solid #045370;
  padding: 3px;
  margin: 0px;
 position: center !important;
 pointer-events: none !important;

&:focus {
 opacity: 1;

.image-caption {
 left: 50%;
 position: absolute;
 top: 50%;
 width: 80%;
 -webkit-transform: translate(-50%,-50%);
 -ms-transform: translate(-50%,-50%);
 transform: translate(-50%,-50%);

.image-caption p {
 font-size: 20px !important;
 font-weight: semibold !important;
 color: #045370 !important;
 text-transform: uppercase; 
 line-height: 150% !important;
 letter-spacing: 2.5px !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: #ffffff;
 opacity: .9;
.sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay-hover:hover .image-caption-wrapper {
  max-height: 100%;

And I will attach a screen shot of what it looks like. 


Thank you! 

Screen Shot 2021-08-12 at 8.03.57 AM.png

Link to comment
  • Replies 3
  • Views 511
  • Created
  • Last Reply

Top Posters In This Topic

  • 1 month later...

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.