Looking to create a large button with a blurred background image that unblurs on hover. I've implemented a container with overflow hidden and adjusted the margin on the background image for defined edges.
However, during the transition from blurred to unblurred, or vice versa, the image edges lose definition. This results in the white container underneath becoming visible until the blur is fully applied or removed.
Any thoughts on how to resolve this issue?
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>