I've been experimenting with a CSS effect that combines zooming and blurring. The idea is that when I hover over an image, it should blur out and scale slightly, all while being contained within a div with overflow:hidden.
However, when testing in Chrome, I noticed a strange glitch. A blurry white border appears around the container during the transition.
I'm curious if there's a better approach to achieve this effect or a workaround for the issue. Any insights would be greatly appreciated!
You can view a gif that illustrates the problem here: https://i.sstatic.net/o3a8W.jpg
And here's the same code running in Firefox for comparison: https://i.sstatic.net/1008t.jpg
Take note of the borders visible within the image.
Below is the CSS code I am using:
<style>
#img0{
width:500px;
height:auto;
}
.hoverBlur{
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
}
.hoverBlur:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
transform:scale(1.1);
-webkit-filter:blur(15px);
-moz-filter:blur(15px);
filter:blur(15px);
}
.container{
margin:200px;
width:500px;
height:333px;
border:1px solid #ccc;
overflow:hidden;
}
</style>
<div class="container">
<img id="img0" src="test.jpg" class="hoverBlur"/>
</div>