I recently saw an image on a webpage that was a simple gradient, I noticed that the image had a beautiful drop shadow that matched image colours.
I looked at how this was achieved and it had been accomplished with handcrafted multiple shadows, this disappointed me as I thought the effect was nice and was hopeful it was simple and easily reusable.
This got me thinking though, there has to be a way to achieve this simply, so I set myself a challenge to try to achieve this in a reusable way and aim for a single element and I was successful!
To start we declare a single div element, this will hold the details of the image. While it would have been great to use the attr() CSS method, we are unable to do so as there is zero browser support for URLs attributes. The alternative we have is to make use of CSS vars within the style for each element that will contain the image. This enables the ability to set the URL of the image still in the mark up allowing. GREAT!
Then comes the CSS magic, now that we can use the var(--image-url) to define the image in the CSS, we simply have to use ::after selector on the element containing the image to create another element of the same size, in the same location, but behind it.
By making the two elements have the same background image we can then apply a filter filter: blur(20px)to blur the image on the background element, then set the opacity of this element to 0. When moves their mouse over the image, we can then set the opacity to 1 and transition this to create a nice slow effect
You can see the final effect below.
1 Element and reusable — ACHIEVED
Check out the codepen here!
I hope you enjoyed this, I often try to solve little challenges like this, I will share more here when I think it's great to share.