How to give outer glow to an object in a transparent png using CSS3?

Question

I'm working on a project where I need to make modifications in more then 500 images to give outerglow on hover effect. I will need to modify each image to give the outer glow. It will be a very time consuming task.

This is example of one image. All images are transparent .png

Is it possible to give this outerglow effect to the bottle image using any tricks of CSS3?

This is just an example of one image other images are in different size and shape.

Answer 1

This can be done using filter(drop-shadow).

Here is a demo http://jsfiddle.net/jaq316/EKNtM/

And here is the code

    <style>         .shadowfilter {         -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));          filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));     }      .bottleimage {         width: 500px;     }     </style>     <img          src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Coca_Cola_Zero_bottle.png"          class="shadowfilter bottleimage"/>  

Answer 2

here's a plugin i found early that do the trick on PNG Image...

Usage:

Enable glow and set color and radius:

$("#testimg").glow({ radius: "20", color:"green"}); 

Disable glow:

$("#testimg").glow({ radius: "20", color:"green", disable:true });  

or

$("#testimg").glow({ disable:true });  

https://github.com/MisterDr/JQuery-Glow