Background opacity and blur over another image

Question

I am working on one thing and instead of using big images I would preffer to use normal background-color, with some opacity and blur on it...

Here is example: http://codecanyon.net/item/translucent-jquery-banner-rotator-slideshow/801607?WT.ac=search_item&WT.seg_1=search_item&WT.z_author=VF

That slider have translucent and blurry description bar and that is exactly what I want...

I found one more example here: http://www.blurjs.com/

But I don't want javascript. I would love if it can be done with css3.

I don't know if that slider use javascript or css for that?

Anyone know to code something like that with css? Thank you for your time.

Answer 1

The slider you linked to is using the canvas element, which requires javascript to manipulate.

What you want is not doable with CSS alone - you need javascript, but it's possible svg can handle it. I don't have enough svg experience to know for sure, however.