How to make this image blur with css

Question

The below is the image which is already blur i mean i want to make other image blur like that image.

Below image with blur to make like the below image

The below image without blur but want to make like above image

The below is code i tried i don't know whether i correctly did or not i mean blur takes more effect to the image i just want to make light blur.

 img { filter: blur(1px); -webkit-filter: blur(1px); -moz-filter: blur(1px); -o-filter: blur(1px); -ms-filter: blur(1px); } 

 <div><img src="http://i.imgur.com/Cdd4Es3.jpg" /></div> 

Answer 1

Just add a gradient overlay

 div { display: inline-block; position: relative; overflow: hidden; } div::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to right, transparent 40%, rgba(255, 255, 255, .8)); } img { display: block; filter: blur(2px); } 

 <div> <img src="http://i.imgur.com/Cdd4Es3.jpg" /> </div> 

Answer 2

You can add multiple filters to get a desired result. I would add a brightness filter and increase the brightness of the image to 200%.

img {
  -webkit-filter: brightness(200%) blur(1px);
  filter: brightness(200%) blur(1px);
}

jsFiddle link

Answer 3

You can try adding one more css filter to lighten up the img like;

brightness(110%);

img {
    filter: blur(1px) brightness(110%);
        -webkit-filter: blur(1px) brightness(110%);
        -moz-filter: blur(1px) brightness(110%);
        -o-filter: blur(1px) brightness(110%);
        -ms-filter: blur(1px) brightness(110%);

}