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

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.

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"/>

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

As easy as pie. You just use the same image twice, one above the other.

<div class="container">
  <img class="main" src="http://www.pngmart.com/files/2/Mario-PNG-Image.png" />
  <img class="glow" src="http://www.pngmart.com/files/2/Mario-PNG-Image.png" /> 
</div>

You just work on the image below, scale it a little, bright it until it's white and then blur it. Then you set your opacity on 0 and set it back to one when the above image is hovered.

.container {
  position:relative;
  background-color:#444444;
  width:600px;
  height:600px;
}
img {
  position:absolute;
  max-height:90%;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
}
img.main {
  z-index:2;
}
img.glow {
  z-index:1;
  transform: scale(1.01) translate(-50%, -50%);
  -webkit-transform: scale(1.01) translate(-50%, -50%);
  filter: brightness(0) invert(1) blur(5px);
  -webkit-filter: brightness(0) invert(1) blur(5px);
  opacity:0;
}
img.main:hover ~ img.glow {
  opacity:1;
}

No Javascript required whatsoever.

https://jsfiddle.net/nkq1uxfb/3/