title: How to make a round mask over a image
body: <p>This is my take using css only, but the image is not centred, and also the image get bigger not the mask</p>
  
  <p><a href="http://jsfiddle.net/shbnts90/2/" rel="nofollow">jsfiddle Demo</a></p>
  
  <p>I want to achieve the same affect in here</p>
  
  <p><a href="http://jackietrananh.com/portfolio.php" rel="nofollow">http://jackietrananh.com/portfolio.php</a></p>
  
  <p>He is using an image <a href="http://jackietrananh.com/img/sprite-s82d3b02845.png" rel="nofollow">http://jackietrananh.com/img/sprite-s82d3b02845.png</a> but how this can happen with pure css or js?</p>
  
  <p>and without</p>
  
  <pre><code>clip-path
  </code></pre>