Background opacity and blur over another image

I am working on one and instead of using large images, I would rather use a normal background color with some opacity and blur on it ...

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

This slider has a transparent and blurry description panel, and that is exactly what I want ...

I found another example here: http://www.blurjs.com/

But I do not want javascript. I would like if this can be done using css3.

I don't know if this slider uses javascript or css for this?

Does anyone know something like this using css? Thank you for your time.

+3
source share
1 answer

The slider you linked to uses the canvas element, which requires javascript to control.

What you want cannot be done only with CSS - you need javascript, but maybe svg can handle it. However, I do not have enough svg experience to know for sure.

+3
source

All Articles