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/

If you have to do this to 500+ images, what I would do is great a transparent PNG of the inverse of the bottle with feathered edges around the bottle and lay that over a DIV with the background color under it and the bottle image in between. This will make the solid background color appear to fade out into the inverse bottle PNG and all you would have to do to change the glow color is change the value of the CSS.

Write some jQuery to let you enter the HEX value and you're set ;)

EDIT ***

Problem solved!

http://phillipjroth.com/stackoverflow/8693733/index.html

Edit line 19 of the CSS code "background-color" and it will update the glow. The PNG's are low quality but you can fine tune them to get rid of the ridged edges.

Actually you can do this with the blur CSS3 filter. Just stack 2 images on top of each other and apply the following style to one of it:

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);

To change color of the other image, you can play with other filters like the hue-rotate, sephia etc.

I prefer to generate such glows with a bit of stacking. The first image uses the following CSS filter rule:

blur(5px) grayscale(1) sepia(1) saturate(10000%) invert(1)

This gives you a somewhat larger than the base 'bottle' glow in blue.

Then load a second copy of the image at the same coordinates, giving you the bottle with a transparent background atop the blurred blue 'halo' with a similar transparent background.

I found an easy way if you can work with photoshop.

You open the transparent image (example.png) in photoshop and take the blur tool. Then blur the whole image and save as (example-hover.png).

<div id="img1">
    <img src="images/example.png">
</div>

#img1:hover{
    background: url('images/example-hover.png') no-repeat 0px 0px;;
}