Jump to content

How to code overlay text - colour issue

Go to solution Solved by Beyondspace,

Recommended Posts

Have cobbled together some CSS which is working fine; just can't get the hover text visible despite changing the hex code. 

You can really faintly see the overlay text, how do I get it to grey / black? 

 

 

844909833_Screenshot2022-02-11at13_18_58.png.7c6c43e0b99ddff9411746e23184a071.png

 

.image-caption-wrapper {
 opacity: 0;
 text-align: center !important;
 top: 0 !important;
 position: absolute;
 pointer-events: none !important;
}

.image-caption-wrapper { max-height: 100% !important; }
.image-caption-wrapper {
  background: rgba(255,255,255,0.7) !important;
}

&:hover,
&:focus {
 opacity: 1;
}

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

.image-caption p {
  color: #ea4e4c !important;
 font-size: 20px !important;
 font-weight: semibold !important;
 text-transform: lowercase; 
 line-height: 120% !important;
 letter-spacing: 2px !important;
 opacity: 0 !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: ;
 opacity: .1;
}

 

Edited by hpeck
clearer title
Link to comment
  • hpeck changed the title to How to code overlay text - colour issue
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

35 minutes ago, hpeck said:

Have cobbled together some CSS which is working fine; just can't get the hover text visible despite changing the hex code. 

You can really faintly see the overlay text, how do I get it to grey / black? 

 

 

844909833_Screenshot2022-02-11at13_18_58.png.7c6c43e0b99ddff9411746e23184a071.png

 

.image-caption-wrapper {
 opacity: 0;
 text-align: center !important;
 top: 0 !important;
 position: absolute;
 pointer-events: none !important;
}

.image-caption-wrapper { max-height: 100% !important; }
.image-caption-wrapper {
  background: rgba(255,255,255,0.7) !important;
}

&:hover,
&:focus {
 opacity: 1;
}

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

.image-caption p {
  color: #ea4e4c !important;
 font-size: 20px !important;
 font-weight: semibold !important;
 text-transform: lowercase; 
 line-height: 120% !important;
 letter-spacing: 2px !important;
 opacity: 0 !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: ;
 opacity: .1;
}

 

Can you share your site with the protected password so we can take a look?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • Solution
9 hours ago, hpeck said:

Domain is changed now to hannahpeckillustration.co.uk 

Try adding to Home > Design > Custom Css

#collection-6204d222e342e93093702da4 
.sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay-hover .image-caption-wrapper p {
  color: grey ;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

My testing

image.thumb.png.14393561e3a2871ee03097c3eb8cb39c.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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

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.