CODEWITHSUNDEEP
jquerycssgoogle-chromesafaritransform
droidev
droidev

Reputation: 7390

Image scaling error in chrome and safari

In my webpage I have a div with border-radius:50%; inside that div I have added an image, when hover on that image, it scales in to 1.2. this thing works properly in mozilla, but when I comes to chrome and safari, the image scales by overflowing it than the circular div (border-radius:50%), why this is happening. is there any method to solve this ?

code

HTML

<div class="work-round">
  <img src="images/latestwork_01.png">
</div>

CSS

.work-round {
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    margin: 10px auto;
    max-height: 250px;
    overflow: hidden;
    width: 250px;
}

.work-round img {
    background: none repeat scroll 0 0 #fff;
    height: 100%;
    min-height: 240px;
    transition: all 0.5s ease-out 0s;
    width: 350px;
}
.work-round img:hover {
    opacity: 0.9;
    transform: scale(1.2);
}

fiddled here

screenshot on hover enter image description here

Upvotes: 4

Views: 524

Answers (3)

J.Tural
J.Tural

Reputation: 925

I edited your code see results here

it chrome BUG with scale and overflow .

for the container that have the ( overflow:hidden ) add ( in your case its the .work-round )

position:relative;
z-index:1;

Upvotes: 1

KyleK
KyleK

Reputation: 5066

Solution found by nickspiel here: css3 border radius animation transition in safari not working

See: https://jsfiddle.net/KyleKatarn/s0bpp0ho/6/

.work-round {
    -webkit-mask-image: -webkit-radial-gradient(white, black);

To get partial support on Safari: https://jsfiddle.net/KyleKatarn/s0bpp0ho/7/

Upvotes: 2

wraith
wraith

Reputation: 351

Here is one solution (tested on Chrome)

*{

    background:red;
}
.work-round {
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    margin: 10px auto;
    max-height:250px;
    overflow:hidden;
    width:250px;
    transition: all 2s linear;    
    -webkit-mask-image: -webkit-radial-gradient(circle, white, black);


}

.work-round img {
        background: none repeat scroll 0 0 #fff;
    height: 100%;
    min-height: 240px;
    transition: all 0.5s ease-out 0s;
    width: 350px;

    -webkit-border-radius: 500px;width:100%;height:100%;

}
.work-round img:hover {
    opacity: 0.9;
    -webkit-transform:scale(1.2);
}

Upvotes: 1

Related Questions