DEV Community

loading...
Cover image for Blurry image backgrounds like on Instagram

Blurry image backgrounds like on Instagram

Simon Köhler
Freelance PHP Backend-Developer and Expert for TYPO3 Open Source CMS
・1 min read

A JavaScript/CSS prototype to automatically generate blurred background images from the image source of the original image. The img tag just has to be packed into a container. The rest is done by JavaScript and CSS filters.

TIP: If you use Twitter Bootstrap 5, you can also use the ratio classes (.ratio, .ratio-16x9) for the image container (.image-container).

NOTE: If you want to use this code for a live website, please add more CSS rules and better responsive handling ;-) It's not perfectly done yet!

Your Feedback is appreciated!

What do you think about this approach? Would you do it the same way? What would you do better in the current code? Just write it in the comments!

Discussion (0)