The Goal

I wanted to create a hover effect (currently seen on my portfolio page) where the picture blurs when the user hovers over it so the text on top is legible. Simple enough, right? There’s even a handy little CSS blur filter. All you have to do is pass in an argument for the blur radius.

The Problem

Here is an image with the class blur that gives it the property filter: blur(4px). As you can see, it looks simply horrendous.

Photo with fuzzy edges

HTML

<img class="blur" src="/img/stationery/cover.png">

SASS

.blur
  -webkit-filter: blur(4px)
  filter: blur(4px)

This is because towards the edge of the photo, the blur filter pulls in the pixels surrounding the image and includes them in the blur effect.

The Solution

In order to get crisp edges, there are a couple steps we need to take. We essentially want to hide the edges of the photo, so we can scale it up a little and put a container around it to hide the overflow of the fuzzy edges.

Photo with crisp edges

HTML

1
2
3

<div class="blur-wrapper">
  <img class="blur" src="/img/stationery/cover.png">
</div>

SASS

1
2
3
4
5
6
7
8
9
10

.blur-wrapper
  width: 50%        // this is where you style the image width
  overflow: hidden  // clips feathery edges

.blur
  width: 100%  // necessary for photo to scale correctly
  -webkit-transform: scale(1.05) // makes fuzzy edges go to overflow of .blur-wrapper
  transform: scale(1.05)
  -webkit-filter: blur(4px)
  filter: blur(4px)

Codepen

Violà!