title: Fade effect during hover - border-radius doesn't wok
body: <p>look at this <a href="http://jsfiddle.net/Szme6/2/" rel="nofollow" >jFiddle</a> with CHROME.
  Can anyone help me to solve that problem? I don't want to see the corner of the image during transition.
  I prefer do it without jQuery if it's possible :)
  Thanks!</p>
  
  <p>CSS</p>
  
  <pre><code>#cf {
    position:relative;
    height:300px;
    width:300px;
    margin:0 auto;  
    border-radius:50%; 
     overflow:hidden;
      border: 10px solid red;
  }
  
  #cf img {
    position:absolute;
    left:0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
  }
  
  #cf img.top:hover {
    opacity:0;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="cf"&gt;
    &lt;img class="bottom" src="http://www.world-science.org/wp-content/uploads/2011/07/Lion_300.jpg" /&gt;
    &lt;img class="top" src="http://bioexpedition.com/wp-content/uploads/2012/06/Sea-Turtle-Anatomy.jpg" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Szme6/2/" rel="nofollow" >jFiddle</a></p>