CSS3 图像悬停在圆形 div 之外并带有过渡

Question

为什么图像在 hover 时会超出 overflow:hidden div，如何修复此错误？

例如:http://jsfiddle.net/b5EyS/

注意:chrome 有问题

Answer 1

也通过向 img 添加 border-radius 解决了这个问题。不确定那是否是您想要的。请评论这是否重要!

a {
    width: 100px;
    height: 100px;
    background: #000;
    display: block;
    border: 2px solid #000;
    border-radius: 50%;
    overflow: hidden;
}
img {
    max-width: 100%;
   -webkit-transition: opacity 0.1s linear;
    -moz-transition: opacity 0.1s linear;
    -o-transition: opacity 0.1s linear;
    transition: opacity 0.1s linear;
    border-radius: 50%;
}
img:hover {
    opacity: 0.5;
}