1

I'm trying to create a blurred opaque overlay to a load of text content.

All the solutions and posts I've come across are for image backgrounds, not just HTML text content.

What I want will very much look like the floating overlays on http://www.blurjs.com/ but instead of a background image, it will be HTML text (<p> tags, <h1> tags etc).

Here is a Fiddle of roughly what I need, but I want the white opaque background colour of the overlay to be blurred also.

Thanks!

Kai Feller
  • 653
  • 3
  • 14
  • Have you tried using -webkit-filter: grayscale(0.5) blur(10px); ??? – GibboK Oct 08 '14 at 09:44
  • @GibboK this will blur the content of the overlay and not the content behind it as OP seems to want. – web-tiki Oct 08 '14 at 09:45
  • Yes, it doesn't seem to blur the content behind it, just the overlay and the text with the overlay - good point though, forgot to mention I tried that. – Kai Feller Oct 08 '14 at 09:45
  • Can you please add a picture of what you want to achieve? is it the box with code or the box with text `attention`? – Gildas.Tambo Oct 08 '14 at 09:51
  • or this one http://stackoverflow.com/questions/17092299/how-to-use-css-and-javascript-to-create-a-blurred-frosted-background – web-tiki Oct 08 '14 at 09:56

0 Answers0