Эффект затухания во время наведения - граница-радиус не wok

Question

Посмотрите на это jFiddle с ХРОМОМ. Может ли кто-нибудь помочь мне решить эту проблему? Я не хочу видеть угол изображения во время перехода. Я предпочитаю делать это без jQuery, если это возможно :) Спасибо!

CSS

#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; 
} 

HTML

<div id="cf"> 
    <img class="bottom" src="http://www.world-science.org/wp-content/uploads/2011/07/Lion_300.jpg" /> 
    <img class="top" src="http://bioexpedition.com/wp-content/uploads/2012/06/Sea-Turtle-Anatomy.jpg" /> 
</div> 

jFiddle

Answer 1

Это похоже на ошибку в Chrome для меня.

Вы можете обойти его setting the same border-radius on the image.

#cf img { 
    border-radius:50%; 
    overflow:hidden; 
}