Sorry, my photo example wasn’t very helpful; I’ve found a better one that explains what I’m looking for:
What I’d like to achieve is that only the background of the category-list or the topic-list is blurred and the text and everything else “on top” is not affected by the blur. Imagine, for example, if the blurred area in the photo was like the topic-list and could scroll up and down, but would only blur out the background behind the topic-list (and for that matter, not on the sides; you’d be able to see the background clearly there).
Here are links to a couple other examples; there’s CSS included in these, but I just can’t wrap my head around it (and I’m sure my explanation is a bit convoluted as well):
- Frosting Glass with CSS Filters | CSS-Tricks
- CSS overlay blur effect - JSFiddle - Code Playground
- http://cssdeck.com/labs/blurred-glass (pretty close to what I’m attempting, just imagine wherever those bars go have a blurred background, but it’s only behind the bar)
- http://www.webdirections.org/demos/translucency/index.html (the best one I can find that replicates what I’m attempting, found the write-up here: Creating iOS 7 effects with CSS3: translucency and transparency – Web Directions)
And to be honest, the more I investigate, the more it seems like I’d need to delve into HTML to achieve this affect or have duplicate images (a clear one and a blurred one), and it may not be supported across all browsers. Nonetheless, if there’s a solution to this, I’d love to give it a go!