Cards with Background image

March 4, 2019

I had an idea to try using the image of the card as the background of the card as well. I thought it’d add a bit of visual interest while not requiring another image to download.

Sketch Mockup of the 3 cards
Sketch Mockup

There were a few challenges and the code isn’t as clean as I’d like. In order to apply the filter: blur(*) effect, it has to be an actual element, and not a background image.

I circumnavigated that by using the ::after psuedo element. And, because this isn’t a “real” element, I needed to add <style> </style> tags in the actual HTML so you could apply the image dynamically using CSS.

This is all very doable and probably a lot cleaner to use a small javascript function for this but I didn’t go down the route for this. Also, the mockup was just that – a mockup. I changed a few things when I was actually executing it.

See the Pen Cards with Blurry Background Effect by Sean Smyth (@sean_smyth) on CodePen.

If you enjoyed this post, do me a favour & share it with a friend who you think'll like it too. I'd very much appreciate it. Thanks!

Or if you like what you see, why not sign up to my newsletter?
A monthly roundup so you won't be bombarded. Pinkie promise :)

Sean Smyth Photo

Post by Seรกn Smyth

(That's me on the left above there)

I currently work as a Creative Designer & Email Marketing Specialist for Homestay.com. I'm also a Live Music Photographer and Social Manager for GoldenPlec.

Other Recent Posts