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

Answer 1

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

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/