DevonHarris Posted October 20, 2022 Share Posted October 20, 2022 Hi! Hoping someone might be able to assist! I have a website which uses html in section headings because there are certain words ("spans") that have a background image. I would love to also incorporate this in one of my Image Card blocks but can't figure it out 😕. I'm choosing not to use Fluid Engine for this section because I want to incorporate the Collide image load animation.  I have the html and CSS to work, just not sure how to make it work in this particular image. Thanks so much! Link to comment
Beyondspace Posted October 21, 2022 Share Posted October 21, 2022 22 hours ago, DevonHarris said: Hi! Hoping someone might be able to assist! I have a website which uses html in section headings because there are certain words ("spans") that have a background image. I would love to also incorporate this in one of my Image Card blocks but can't figure it out 😕. I'm choosing not to use Fluid Engine for this section because I want to incorporate the Collide image load animation.  I have the html and CSS to work, just not sure how to make it work in this particular image. Thanks so much! Can you share your site with the protected password so we can take a look? Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword HighlighterIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
DevonHarris Posted October 21, 2022 Author Share Posted October 21, 2022 Hi @bangank36 it’s Flowers, thanks!! Link to comment
Solution DevonHarris Posted October 21, 2022 Author Solution Share Posted October 21, 2022 For anyone looking for a solution to this- I simply bolded the targeted word in the actual image title. In this example, we wanted to make the text red. Within the code, I also adjusted the font-weight to un-do the bolded part. On the real website, the text will be black but will have a background image, all via CSS. The CSS code used (Design>Custom CSS) was as follows, targeting the specific block, and then the text: Quote #block-yui_3_17_2_1_1665072485008_13882{  h3 strong {   font-weight: 500 !important;   color: red !important;  } } 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