CSS – Change Div background color depending on an image color inside the same Div

CSS Development Website Development

The effect you’re looking for is possible by re-using the exact same image enlarged a few times (~10), overlapped with position:absolute with a huge blur factor, while trimming its overflow:

You can further improve this by adding a JS that simply copies the <img> on the fly and applies class .blur to it (so you don’t have to manually add two images to each card).

Note css-filters don’t yet have full browser support.
In the example you linked, the blur is done using SVG <filter> (slightly better browser support) and a <feGaussianBlur>, but the principle is the same.

Leave a Reply

Your email address will not be published. Required fields are marked *