{"id":7855,"date":"2025-12-01T12:14:22","date_gmt":"2025-12-01T17:14:22","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=7855"},"modified":"2025-12-03T18:12:31","modified_gmt":"2025-12-03T23:12:31","slug":"non-square-image-blur-extensions","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/non-square-image-blur-extensions\/","title":{"rendered":"Non-Square Image Blur Extensions"},"content":{"rendered":"\n

I recently came across this CodePen demo<\/a> by Vivi Tseng, which creates the blur extension effect by placing a square div<\/code> with a blur()<\/code> beneath the img<\/code> element and I couldn’t help but think a simpler solution should<\/em> be possible with a single img<\/code> element and minimal CSS.<\/p>\n\n\n\n

\"Screenshot
the result we’re aiming for<\/figcaption><\/figure>\n\n\n\n

So let’s first take a look at how to approach things for a simple, four CSS declarations solution. And then we’ll be going through how to tackle extra constraints, such as better support, an extra touch like fading the image into its blur extension and not knowing what orientation an image might have.<\/p>\n\n\n\n

The Simple Solution, Dissected<\/h2>\n\n\n\n

We have an img<\/code> element:<\/p>\n\n\n

<img<\/span> src<\/span>='my-image.jpg'<\/span> alt<\/span>='image description'<\/span> \/><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
The 1st Declaration<\/h3>\n\n\n\n
We start out by setting either a width<\/code> or a height<\/code> for our img<\/code>. In theory, it doesn’t matter. In practice, other layout constraints often make using width<\/code> more convenient.<\/p>\n\n\n
width<\/span>: min<\/span>(100%, 23em<\/span>)<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
This is like setting both a width<\/code> and a max-width<\/code> in one declaration thanks to the min()<\/code>. It doesn’t allow the image to get bigger than 23em<\/code>, nor does it allow it to overflow.<\/p>\n\n\n\n
Note that setting the width<\/code> this way is making some assumptions about the overall layout that may not always be true. For example, if the width<\/code> of the img<\/code> is constrained by that of a grid<\/code> column, then it’s probably better to use the min()<\/code> to size the column and then set the width<\/code> or max-width<\/code> of the img<\/code> to 100%<\/code>. But since the page layout isn\u2019t central to the technique covered in this article, we\u2019re leaving that discussion aside.<\/p>\n\n\n\n
So far, this is what have for four example images arranged in a 2\u00d72<\/code> grid.<\/p>\n\n\n\n
\"Screenshot
result after setting the width<\/code><\/figcaption><\/figure>\n\n\n\n
The 2nd Declaration<\/h3>\n\n\n\n
Next, we make our img<\/code> occupy a square box:<\/p>\n\n\n
aspect-ratio<\/span>: 1<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Since this technique refers to non-square images, an aspect-ratio<\/code> of 1<\/code> stretches our img<\/code>.<\/p>\n\n\n\n
\"Screenshot
result after setting the aspect-ratio<\/code><\/figcaption><\/figure>\n\n\n\n
The stretching doesn’t look good, which leads us to the next step.<\/p>\n\n\n\n
The 3rd Declaration<\/h3>\n\n\n\n
The fix for the distortion problem is to use object-fit<\/code><\/a>:<\/p>\n\n\n
object-fit<\/span>: contain<\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
The contain<\/code> value scales the actual image until its longer side exactly fits the square box of the img<\/code>, leaving empty space around the shorter side. By contrast, cover<\/code> scales the actual image until its shorter side exactly fits the square box of the img<\/code>, cropping the ends of the longer side.<\/p>\n\n\n\n