Jump to content

Blur Background Behind Text of Image Title

Recommended Posts

Site URL: https://www.olympiccnc.com/

https://www.olympiccnc.com/ password: password

I have 3 images on my homepage that I want to click-through link to the other pages on my site.

I tried using buttons initially, but I want to be able to click anywhere on the image to use the link, not just on the button itself.

The  middle and right-hand images (For Your Home & About the Company) are what I want it to LOOK like, with a blur behind the text, which I did using this code: 

.image-button-inner a {
  background-color: rgba(255,255,255,.2)!important;
  backdrop-filter: blur(5px);


Currently, the image titled "For Your Business" is made by modifying the Title Text (rather than using a button) on the image with the following code:

.homepage .image-title * {
  background-color: rgba(255,255,255,.2)!important;
  color: black!important;
  border: 2px solid black;
  border-radius: 7px;
  padding-right: 8px;
  padding-left: 8px;
  white-space: nowrap!important;
  backdrop-filter: blur(5px)

But the backdrop blur is not working. 


How to I get the "frosted glass" blur effect to work behind the text, like it does on the buttons?



Link to comment
  • Replies 3
  • Views 2.4k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

I think the problem is your selector .homepage .image-title *. That asterisk is trying to apply those property value pairs to all the sub elements which is probably not what you want.

If you change it to .homepage .image-title. that should fix some issues but not all. That ruleset may need to be broken out in to two or more.


Let us know how it goes.


Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Thanks for the suggestion. (I'm very new to css, only 4 days of experience so far).

Unfortunately when I just use .homepage .image-title the size of the container doesn't properly conform to the text. Depending on the screen size, the container (with border and blur) will be either too big or too small. 

But you're right, the blur effect works when I use  .homepage .image-title, but all of the other customizations (background color, text color, padding, and border) work properly when I use .homepage .image-title *.

I had similar trouble when I was trying to use buttons and give them a blurry background:

I targeted .image-button-inner, but that didn't quite work size-wise, so I had to target .image-button-inner a, which worked properly. But I don't fully understand what the does or what the * does, to be honest.

However, I was able to use inspect element to see what I needed to target with the buttons, but I can't find the container of the text box using inspect element, I can only find the whole image, if that makes sense. 

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.