Blur Background Behind Text of Image Title

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

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.

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.