Soft Glow

soft glow
Our main tools for creating soft glow are : background:inherit and filter:blur()
GIF soft glow

Set our images

Create a div and set its background :

And set its dimensions :

single image

Similarly add two more images :

three images

We have to make div‘s inline-block so that all div‘s align horizontally :

horizontally aligned three images

Add some margins :

horizontally aligned three images with margins

Styling Images

First fit our images perfectly inside div

images with background-size:cover

Make the corners round and give a nice drop shadow :

images with rounded corners and drop shadow

Adding Soft Glow

We will give soft glow with pseudo element :after. We will make it like it will cover whole image :

images with pseudo elements

Add blur to them :

images with blurred pseudo elements

We want those blurred pseudo elements below our images :

images with soft glow

We will make our soft glow more darker by increasing its contrast :

images with soft glow

Make glow on hover

We will hide the glow when mouse is not over the image and make it visible when someone hovers mouse over it :

GIF soft glow

Whole code :

Code is also available here : https://codepen.io/zFunx/pen/OQLxvx. This won’t work in IE as CSS filters do not work in IE. Also not working on Edge, I don’t know the reason. Useful links :