Jump to content

Code as Image Block Title 7.1

By DevonHarris, in Fonts, colors and images

Go to solution Solved by DevonHarris,

Recommended Posts

DevonHarris Level 5

DevonHarris

Posted
Posted

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!

image.thumb.png.5de95d56834c949cff08308c20b0d658.png

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Beyondspace Level 14

Beyondspace

Posted
Posted
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!

image.thumb.png.5de95d56834c949cff08308c20b0d658.png

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
DevonHarris Level 5

DevonHarris

Posted
  • Author
  • Solution
Posted

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;
  }
}

image.thumb.png.bb40909c04d363b0b783c995c67af366.png

Link to comment

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources