CSS3 Image going outside circular div on hover with transition

Question

Why image going outside overflow:hidden div on hover, how to fix this bug?

ex: http://jsfiddle.net/b5EyS/

Notice: problem with chrome

Answer 1

Solved it by adding border-radius to the img as well. Not sure if that what you want or not. Please comment if this matter or not!

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