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 :
<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;
}

single image

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>

three images

We have to make div‘s inline-block so that all div‘s align horizontally :
.soft-glow{
	/*..*/
	display:inline-block;
}

horizontally aligned three images

Add some margins :
.soft-glow{
	/*..*/
	margin:20px;
}

horizontally aligned three images with margins

Styling Images

First fit our images perfectly inside div
.soft-glow{
	/*..*/
	background-size:cover;
}

images with 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);
}

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 :
.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*/
}

images with pseudo elements

Add blur to them :
.soft-glow:after{
	/*..*/
	filter:blur(20px);
}

images with blurred pseudo elements

We want those blurred pseudo elements below our images :
.soft-glow:after{
	/*..*/
	z-index:-1;
}

images with soft glow

We will make our soft glow more darker by increasing its contrast :
.soft-glow:after{
	/*..*/
	filter:blur(20px) contrast(200%);
}

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 :
.soft-glow:after{
	/*..*/
	opacity:0;
	visibility:hidden;
	transition:.3s;
}

.soft-glow:hover:after{
	opacity:1;
	visibility:visible;
}
GIF soft glow
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 :

Leave a Reply

Your email address will not be published. Required fields are marked *