Make Glow Effect With CSS

This glow effect trick with CSS is not a new trick. As an example you can see the glow effect when you mouse hover over any related post images at the end of this post. To make a CSS glow effect is not hard, you just need to add 2 lines in your CSS class where you want your glow effect to show.

Here are the 2 lines:

-webkit-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
-moz-box-shadow: 0 0 5px rgba(0, 0, 255, 1);

How to use it for an image:

img:hover{
-webkit-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
-moz-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
}

How to use for an input box:

img:hover{
box-shadow: 0 0 5px rgba(0, 0, 255, 1);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
-moz-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
}

Since the -moz-box-shadow property only works for Firefox, this technique only works for Mozilla Firefox and friends. This won’t work on Opera, Chrome and Internet Explorer. But most of my visitors use Mozilla Firefox so this glow effect will be seen by them. Good luck and have a nice try.