html - 悬停期间的淡入淡出效果 - border-radius 不起作用

Question

看看这个jFiddle与 Chrome 。 谁能帮我解决这个问题？我不想在过渡期间看到图像的 Angular 落。 如果可能的话，我更喜欢不用 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;
}