Custom CSS for blurred image

Hello everybody,

I put this CSS (see the picture below) inside the code page in RW. By the way I am using RW 8 and Foundation with Total-CMS for my blog.

21

The CSS I got is from @ben’s blogging tutorial and it basically makes the impact image blurred by about 5px which is an effect that makes the text more readable.

But after I republished the site with this CSS also the other Impact stacks (headers/ banners)that I am using on ALL pages of my website have been blurred; this happened because I am using Impact for all of them.

I was wondering if I can modify this code in a way that the blurred-image effect shows ONLY inside each individual article pages.

Any help with this would be great. Thank you :slight_smile:

I took a quick look,
I’m not sure why on the individual posts(article0 you would be using IMPACT(a slide show) to show single pictures? That aside impact under advanced settings has a Custom Class setting. So I would try to add a class name like myBlur for the areas you want blur applied to. Then change the CSS to:

.myBlur .impact-image {
filter: blur(5px);
}

I removed al the vendor prefixes You can check to see if you need them here:
https://caniuse.com/#search=filter

2 Likes

Thank you so much Doug. It’s working now: amazing ! :slight_smile:
I am using Impact because I might be using the slides in the future and I am also using a few of the visual effects on the other pages.

What do you mean with that?

1 Like

Browser prefixes are the rules above that start with the -, like -webkit or -moz, they allow the code to work on earlier versions of browsers before a new CSS rule has been made normal. It’s kind of a way to “test” new CSS rules as they are added.
As for the filter rule, It’s working on all current browsers, and the link above shows that “prefixing” was really only used on very old -webkit (safari type) browsers. The other prefixes don’t appear to have ever used the “prefixing” to test.

So you can leave them in if you want, but I think the only one that would actually do anything would be -webkit.

2 Likes

Thank you for explaining this Doug.

I appreciate your help and support. Have a lovely day :slight_smile:

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.