CODEWITHSUNDEEP
csstransition
Sam Loya
Sam Loya

Reputation: 85

CSS3 Image going outside circular div on hover with transition

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

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

Notice: problem with chrome

screenshot

Upvotes: 1

Views: 330

Answers (1)

Jacob
Jacob

Reputation: 2071

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

Upvotes: 2

Related Questions