Jump to content

Selective Mix Blend Mode Usage in Summary Block

Recommended Posts

Site URL: https://helix-dodecahedron-bbx6.squarespace.com/

Hello!

I have a summary block in a section that has a png file of a logo monogram as the background image. As you scroll through the section some of the black of the background image interacts with the text of making it difficult to read.

I'm using mix-blend-mode: difference and it's working great for the text, but I would like to preserve the original look of the images and not have any blend effect. I can't figure out how to isolate the images in the summary block in order to set a different mix-blend-mode, does anyone know if this is possible within a summary block?

I've attached a screenshot to illustrate the issue, as well as the css I'm currently using.

Hopefully someone has experience with this as it's been driving me nuts all day!

Thanks for your help!

 

 

mix-blend-mode.png

css.png

Link to comment
  • Replies 12
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

On 7/3/2022 at 4:18 AM, Grog said:

Sorry about that!

https://helix-dodecahedron-bbx6.squarespace.com/

pw: password

Thanks for taking a look!

Edit your code

#block-c92fd2ec45055facf4ad {
    mix-blend-mode: difference !important;
}

to

#block-c92fd2ec45055facf4ad .summary-content {
    mix-blend-mode: difference !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

hi @tuanphan

20 hours ago, tuanphan said:
#block-c92fd2ec45055facf4ad .summary-content {
    mix-blend-mode: difference !important;
}

This didn't seem to do the trick. The images are the way I'd like them to look but the summary titles and the summary excerpts don't have the mix-blend-mode: difference effect I'm hoping to achieve.

 

Is there something else that can be done?

 

thanks

Link to comment
  • 8 months later...
On 7/5/2022 at 11:06 AM, tuanphan said:

Edit your code

#block-c92fd2ec45055facf4ad {
    mix-blend-mode: difference !important;
}

to

#block-c92fd2ec45055facf4ad .summary-content {
    mix-blend-mode: difference !important;
}

 

Hi there @tuanphan

hoping to apply the blend mode to a regular text block created from a blank homepage section to which ive applied a video background. Similar to how youve made your code more specified in this case by adding .summary-content after the block id, is there a similar fix that will get things working in the case of a regular text block? Thank you so much 

Link to comment
On 3/28/2023 at 6:00 AM, hjnz said:

Hi there @tuanphan

hoping to apply the blend mode to a regular text block created from a blank homepage section to which ive applied a video background. Similar to how youve made your code more specified in this case by adding .summary-content after the block id, is there a similar fix that will get things working in the case of a regular text block? Thank you so much 

Hi,

Can you share link to page where you use text block?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...
  • 3 weeks later...
  • 10 months later...
On 5/13/2023 at 1:10 AM, hjnz said:

@tuanphan Hi there! im still a bit stumped on finding a solution to this one! if you had anything i could try id love to give it another crack 🙂

cheers

have you tried: 

 

.fe-block.fe-block-c92fd2ec45055facf4ad {
    mix-blend-mode: difference !important;
}
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.