
Our main tools for creating soft glow are : background:inherit and filter:blur()
Set our images
Create a div and set its background :
<div class="soft-glow" style="background-image:url('https://od.lk/s/NTlfMTQyMzM0NTlf/candy-2538878_640-min.jpg')"> </div>
And set its dimensions :
.soft-glow{ width:200px; height:200px; }
Similarly add two more images :
<div class="soft-glow" style="background-image:url('https://od.lk/s/NTlfMTQyMzM0NTlf/candy-2538878_640-min.jpg')"> </div> <div class="soft-glow" style="background-image:url('https://web.opendrive.com/api/v1/download/file.json/NTlfNjY0NDg0NV8?inline=1')"> </div> <div class="soft-glow" style="background-image:url('https://web.opendrive.com/api/v1/download/file.json/NTlfMTM5MzgyNzdf?inline=1')"> </div>
We have to make div‘s inline-block so that all div‘s align horizontally :
.soft-glow{ /*..*/ display:inline-block; }
Add some margins :
.soft-glow{ /*..*/ margin:20px; }
Styling Images
First fit our images perfectly inside div
.soft-glow{ /*..*/ background-size:cover; }
Make the corners round and give a nice drop shadow :
.soft-glow{ /*..*/ border-radius:8px; box-shadow:0 0 20px rgba(0,0,0,0.3); }
Adding Soft Glow
We will give soft glow with pseudo element :after. We will make it like it will cover whole image :
.soft-glow{ /*..*/ position:relative;/*it's necessary in parent element for positioning pseudo element inside it, otherwise you can't use top, bottom, left, right*/ } .soft-glow:after{ content:""; position:absolute; top:0; bottom:0; left:0; right:0; background:inherit;/*inherit the background from its parent*/ }
Add blur to them :
.soft-glow:after{ /*..*/ filter:blur(20px); }
We want those blurred pseudo elements below our images :
.soft-glow:after{ /*..*/ z-index:-1; }
We will make our soft glow more darker by increasing its contrast :
.soft-glow:after{ /*..*/ filter:blur(20px) contrast(200%); }
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 :
.soft-glow:after{ /*..*/ opacity:0; visibility:hidden; transition:.3s; } .soft-glow:hover:after{ opacity:1; visibility:visible; }
Whole code :
<div class="soft-glow" style="background-image:url('https://od.lk/s/NTlfMTQyMzM0NTlf/candy-2538878_640-min.jpg')"> </div> <div class="soft-glow" style="background-image:url('https://web.opendrive.com/api/v1/download/file.json/NTlfNjY0NDg0NV8?inline=1')"> </div> <div class="soft-glow" style="background-image:url('https://web.opendrive.com/api/v1/download/file.json/NTlfMTM5MzgyNzdf?inline=1')"> </div>
.soft-glow{ width:200px; height:200px; display:inline-block; margin:20px; background-size:cover; border-radius:8px; box-shadow:0 0 20px rgba(0,0,0,0.3); position:relative; } .soft-glow:after{ content:""; position:absolute; top:0; bottom:0; left:0; right:0; background:inherit;/*inherit the background from its parent*/ filter:blur(20px) contrast(200%); z-index:-1; opacity:0; visibility:hidden; transition:.3s; } .soft-glow:hover:after{ opacity:1; visibility:visible; }
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 :