A glow around a circular image with CSS on hover - css

Question

I want there to be a "glow" effect around a circular image I have (it appears as a circle, but it really is a square image with transparent pixels to make it appear as a circle).
Is there an easy and efficient way to do this with CSS? I have tried box shadow, but it doesn't seem to be working correctly.

Answer 1

You can do something like this with box-shadow and CSS animation
img {
margin: 30px;
border-radius: 50%;
box-shadow: 0px 0px 9px 4px #747DE8;
animation: glow 1.5s linear infinite alternate;
}
#keyframes glow{
to {
box-shadow: 0px 0px 30px 20px #535FED;
}
}
<img src="http://placehold.it/150x150/000000/ffffff">
Also you could use some Filters on img. Support
.element {
margin: 50px;
border-radius: 50%;
width: 150px;
height: 150px;
box-shadow: 0px 0px 9px 4px #747DE8;
animation: glowShadow 1.5s linear infinite alternate;
}
img {
width: 100%;
height: 100%;
animation: glowImage 1.5s linear infinite alternate;
}
#keyframes glowShadow{
to {
box-shadow: 0px 0px 35px 15px #535FED;
}
}
#keyframes glowImage{
to {
-webkit-filter: brightness(2);
filter: brightness(2);
}
}
<div class="element">
<img src="http://www.officialpsds.com/images/thumbs/Blue-Planet-psd85316.png">
</div>

Answer 2

This should help you.
.box-shadow {
-webkit-box-shadow: 0px 0px 8px 5px black;
-moz-box-shadow: 0px 0px 8px 2px light green;
box-shadow: 0px 0px 8px 2px light blue;
}
<div class="box-shadow">
<img src="path to image" />
<h1> Text In a Glowing Box.</h1>
</div>

Answer 3

You need to use a combination of the border-radius: property and the :hover pseudo class to get the desired effect.
Basically, set the images border-radius to 50% - this will make your image a perfect circle. Using the :hover psuedoclass will allow you to set the styling of a mouse:hover event.
HTML:
<img src="https://aedesnoyers.files.wordpress.com/2011/12/night11.jpg" class="round-hover" />
Your CSS will look something like:
.round-hover {
height: 200px; /*Resize for Fiddle*/
width: 200px;
border-radius: 50%;
}
.round-hover:hover{
/* thank you #Morgan Clark */
-webkit-box-shadow: 0px 0px 8px 5px black;
-moz-box-shadow: 0px 0px 8px 2px light green;
box-shadow: 0px 0px 8px 2px light blue;
}
Seen here in the fiddle:
Shadow over image when hovering
--SIDE NOTE-- the first two 0's of the box-shadow: property make it so there's no offset in your box shadow. This makes it appear to "glow"
EDIT
After seeing #NENAD's answer, I may have misinterpreted what was asked of a "glowing" effect.