blur a div with image

I have html structure

<div class="div">
<img src="img1.jpg" class="img" /&开发者_如何学Gogt;
</div>

How do I make div appear blurred without removing image ?

I'm not sure you can blur images with pure css. Please correct me if I'm wrong.

My tip would be to try a jquery solution.

A good one is: http://www.pixastic.com/lib/docs/actions/blur/

It's not really a blur, but transparency.

http://www.w3schools.com/Css/css_image_transparency.asp

add something like this to your css file :

div.div img.img {
   opacity:0.4;filter:alpha(opacity=40)
}

I think it's the only solution you'll find without using some javascript or dirty css3 hacks like http://simurai.com/post/716453142/css3-image-blur for example.