title: How to make this image blur with css
body: <p>The below is the image which is already blur i mean i want to make other image blur like that image. </p>
  
  <p>Below image with blur to make like the below image</p>
  
  <p><a href="https://i.stack.imgur.com/oOG6A.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oOG6A.jpg" alt="This"></a></p>
  
  <p>The below image without blur but want to make like above image </p>
  
  <p><a href="https://i.stack.imgur.com/kOnFp.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kOnFp.jpg" alt="this2"></a></p>
  
  <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>img {
      filter: blur(1px);
          -webkit-filter: blur(1px);
          -moz-filter: blur(1px);
          -o-filter: blur(1px);
          -ms-filter: blur(1px);
    
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;img src="http://i.imgur.com/Cdd4Es3.jpg" /&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>