I am making a large button with a blurred background image that unblurs when you hover over it. I have used a container with overflow hidden and made the margin negative on the background image so that the edges are defined.
However, when I hover over the image and it does the transition from blurred to unblurred, or vice versa, the edges of the image are no longer defined. This creates an effect where the edges of the white container underneath it will be visible. While completely blurred or completely unblurred, these edges immediately become defined again.
How can I fix this?
body {
background-color: black;
}
.container {
position: fixed;
top: 2.5vh;
left: 2.5vh;
width: 50vh;
height: 50vh;
background-color: white;
overflow: hidden;
}
.image {
background-image: url(https://www.decorativefair.com/wp-content/uploads/2017/09/yellow-wallpaper-12-1024x640.jpg);
margin: -5%;
width: 110%;
height: 110%;
filter: blur(6px);
transition: 1s;
}
.image:hover {
filter: blur(0px);
}<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="image"></div>
placeholder text
</div>
</body>
</html>
