title: Add circular fading opacity (vignette effect) to images in CSS
body: <p>I want to give <strong>circular opacity</strong> to an image using CSS.</p>
  
  <p>I know I can achieve opacity on images like this:</p>
  
  <pre><code>.circle img {
      opacity: 0.4;
      filter: alpha(opacity=40);
  }
  </code></pre>
  
  <p>I know I can achieve circular images like this:</p>
  
  <pre><code>.circle {
      border-radius: 50%;
      display: inline-block;
  }
  .circle img {
      border-radius: 50%;
      display: block;
  }
  </code></pre>
  
  <p>I want somehow to merge the two things above and apply the opacity only for the edges of the image, so the center of the image gets almost nothing from the opacity tag. I have searched for hours but found nothing.</p>
  
  <p>Without opacity: <a href="http://jsfiddle.net/8w6szf84/47" rel="noreferrer">http://jsfiddle.net/8w6szf84/47</a></p>
  
  <p>With opacity: <a href="http://jsfiddle.net/8w6szf84/48/" rel="noreferrer">http://jsfiddle.net/8w6szf84/48/</a> -> bad opacity, want only the edges to fade...</p>
  
  <p>Do I need to use Javascript on this? Any suggestions?</p>