I'm trying to create a hover effect where an image within a parent div transitions into a blurred state. However, I've run into an issue where if the image is set to 100% width/height of the parent div, there is a visible bezel of the parent's background color when it becomes blurred. I attempted adjusting the width/height of the image to 140% and playing with negative left/right/top/bottom values, but was unsuccessful in eliminating the bezel. The only solution that worked involved manipulating the overflow property of the parent container to 'hidden', resulting in a strange clipping effect at the end of the transition. Can someone help me achieve the blur effect without the bezel or clipping, while still maintaining the transition duration? In my scenario, zooming the image in to 120-140% is actually preferable. Any insight would be greatly appreciated!
div {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
margin: auto;
background-color: red;
}
img {
position: absolute;
width: 140%;
height: 140%;
transition-duration: 1s;
left: -20%;
top: -20%;
}
div:hover img {
-webkit-filter: blur(30px);
filter: blur(30px);
transition-timing-function: ease-out;
}<div id='container'>
<img src ='https://i.chzbgr.com/full/9112752128/h94C6655E/'>
</div>