<div class="container"><img src="https://images.unsplash.com/photo-1503499746616-a6d202989535?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=83f235cb9de0c422a84cd2d8fef8b261" alt=""></div>
img {
filter: blur(7px) contrast(1.9);
transition: .75s;
// This code handles image sizing and the blurred edges
width: 119%;
transform: translateX(-20px) translateY(-15px);
}
img:hover {
filter: unset;
}
.container {
width: 50vw;
height: 50vw;
overflow: hidden;
margin: 20px auto;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.