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

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;;
}

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

Answer 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.

Answer 4

This can be done using filter(box-shadow). Have a look at http://demosthenes.info/blog/598/boxshadow-property-vs-dropshadow-filter-a-complete-comparison

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 5

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.

Answer 6

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/