Jump to content


  • Posts

  • Joined

  • Last visited

BenjaminRogers01's Achievements

Level 1

Level 1 (1/20)



  1. 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 a 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.
  2. 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? Thanks!!!
  • 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.