Menu
.tricky {
width: 200px;
height: 200px;
border-radius: 50%;
border: 0px solid;
background: #2373bd;
display: inline-block;
position: relative;
overflow: hidden;
}
.tricky_image {
width: 100%;
height: 100%;
-moz-transition: all .6s ease;
-webkit-transition: all .6s ease;
-ms-transition: all .6s ease;
-o-transition: all .6s ease;
transition: all .6s ease;
opacity: 0.7;
border-radius: 50%;
filter: alpha(opacity=70);
overflow: hidden;
}
.tricky_image:hover {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}<!doctype html>
<html>
<head>
</head>
<body>
<div class="tricky">
<img class="tricky_image" src="location_images/sanfranciscoweb.png" alt="Example">
</div>
</body>
</html>my desired effect is only working in Firefox and i assume IE. I am starting with a transparent image with a div wrapper around it with a blue background. When the user hovers over the image, i want it to zoom in and restore the opacity to 100% without breaking the set width and height of the div wrapper. This works perfectly in Firefox, but when i run the animation in Chrome the image exceeds the width of the blue div wrapper behind it. Here is my code and any help would be appreciated & JS Fiddle http://jsfiddle.net/yaLupdzo/1/:
<!doctype html>
<html>
<head>
<style>
.tricky {
width: 200px;
height: 200px;
border-radius: 50%;
border: 0px solid;
background: #2373bd;
display: inline-block;
position: relative;
overflow: hidden;
}
.tricky_image {
width: 100%;
height: 100%;
-moz-transition: all .6s ease;
-webkit-transition: all .6s ease;
-ms-transition: all .6s ease;
-o-transition: all .6s ease;
transition: all .6s ease;
opacity: 0.7;
border-radius: 50%;
filter: alpha(opacity=70);
overflow: hidden;
}
.tricky_image:hover {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="tricky">
<img class="tricky_image" src="location_images/sanfranciscoweb.png" alt="Example">
</div>
</body>
</html>
569
This is a known issue as filed here: https://code.google.com/p/chromium/issues/detail?id=157218
In Webkit, with hardware acceleration, animated layers get promoted to a different rendering surface during animation, and then demoted once the animation is complete.
Turns out there is a simple solution. Have the container element 'promoted' to the same rendering layer as the hardware accelerated child by adding a lightweight animation to it:
.tricky {
width: 200px;
height: 200px;
border-radius: 50%;
border: none;
background: #2373bd;
display: block;
overflow: hidden;
-webkit-transform:scale(1.0);
}
.tricky_image {
width: 200px;
height: 200px;
-webkit-transition: all .6s ease;
opacity: 0.7;
}
.tricky:hover {
-webkit-transform:scale(1.0);
}
.tricky:hover .tricky_image {
opacity: 1;
-webkit-transform:scale(1.2);
}
See: http://jsfiddle.net/yaLupdzo/3/
Note that I've also added a simple animation to the parent container's default state, so that the same issue doesn't happen when hovering out.
77
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
You can repeat your code like that for browser compatibility..
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
