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

Hover overlay color not changing


Sarah-Daye

Question

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

Hi! 

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;
 width:75%;
 height:75%;
  border: 2px solid #045370;
  padding: 3px;
  margin: 0px;
 position: center !important;
 pointer-events: none !important;
}

&:hover,
&: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
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

3 answers to this question

Recommended Posts

Create an account or sign in to comment

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


×
×
  • Create New...