Our main tools for creating soft glow are : background:inherit and filter:blur()
[WPGP gif_id=”478″ width=”600″]
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;
}
[WPGP gif_id=”478″ width=”600″]
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 :
