Our main tools for creating soft glow are : background:inherit and filter:blur()
Set our images
Create a div and set its background :
|
1 2 3 |
<div class="soft-glow" style="background-image:url('https://od.lk/s/NTlfMTQyMzM0NTlf/candy-2538878_640-min.jpg')"> </div> |
And set its dimensions :
|
1 2 3 4 |
.soft-glow{ width:200px; height:200px; } |
Similarly add two more images :
|
1 2 3 4 5 6 7 8 9 10 11 |
<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 :
|
1 2 3 4 |
.soft-glow{ /*..*/ display:inline-block; } |
Add some margins :
|
1 2 3 4 |
.soft-glow{ /*..*/ margin:20px; } |
Styling Images
First fit our images perfectly inside div
|
1 2 3 4 |
.soft-glow{ /*..*/ background-size:cover; } |
Make the corners round and give a nice drop shadow :
|
1 2 3 4 5 |
.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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.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 :
|
1 2 3 4 |
.soft-glow:after{ /*..*/ filter:blur(20px); } |
We want those blurred pseudo elements below our images :
|
1 2 3 4 |
.soft-glow:after{ /*..*/ z-index:-1; } |
We will make our soft glow more darker by increasing its contrast :
|
1 2 3 4 |
.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 :
|
1 2 3 4 5 6 7 8 9 10 11 |
.soft-glow:after{ /*..*/ opacity:0; visibility:hidden; transition:.3s; } .soft-glow:hover:after{ opacity:1; visibility:visible; } |
Whole code :
|
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
.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 :
