Blurry image backgrounds like on Instagram
Simon Köhler

Simon Köhler @typo3freelancer

About: Freelancer PHP Developer. Expert for Bootstrap Framework, JS, HTML, SASS and the TYPO3 Open Source CMS

Location:
Panama
Joined:
Nov 28, 2020

Blurry image backgrounds like on Instagram

Publish Date: Jul 31 '21
23 1

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!

Comments 1 total

    Add comment