<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.