'How to overlay a rectangular image on its blurred square version
I would like to convert a rectangular image to a square image, but without losing information about the original image. My idea was to create a square image, then I would blur it and I would overlay the rectangular image on it, so something similar:
All this should use HTML+CSS only. To do this, I use Photoshop right now but a way to replicate this behavior using CSS would be amazing because it would save me a lot of time. I don't have any idea how to do that because the main problem is that the rectangular image should have the same height (or width, if width > height) as the square blurred image and it should be responsive (so no fixed size, it depends on the size of the original image).
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|