Content over an image with a blur effect

The CSS filter property provides an easy option to add various effects to an image, without doing external image processing.

I recently came across a design where there was some content over an image, with a blur effect on the image, plus a color tint only on the area of the content. Something similar to the image below.

One option to do it would be to take the image with the blurred part intact and just add the text on top, but that would be a headache to maintain the responsiveness. The best option is to use the blur option of the CSS filter.

However, the filter should be applied to an image or a background image of an element. To get the above effect, we have to go apply the filter to a background image. In addition to the blur, there is also a purple tint applied as well. To get these multiple effect, we have to take advantage of CSS pseudo classes as well.

Use absolute positioning and top position 50% and transform: translateY(-50%) to keep it vertically centered in the image container. If padding is used, make sure that box-sizing: border-box options is added, otherwise, it would cause some alignment issues with the background image used in the content ribbon and the actual image.