Grog Posted June 30, 2022 Share Posted June 30, 2022 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! Link to comment
Grog Posted June 30, 2022 Author Share Posted June 30, 2022 @tuanphan is there any way to isolate the summary section images from the mix-blend-mode settings for the block? Link to comment
tuanphan Posted July 2, 2022 Share Posted July 2, 2022 Your site is private. Can you setup an access password & share url again? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Grog Posted July 2, 2022 Author Share Posted July 2, 2022 Sorry about that! https://helix-dodecahedron-bbx6.squarespace.com/ pw: password Thanks for taking a look! Link to comment
tuanphan Posted July 4, 2022 Share Posted July 4, 2022 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Grog Posted July 5, 2022 Author Share Posted July 5, 2022 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment