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

enter image description here

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.

No it's not. With css, you can only apply glow/shadow to an element. It could be rounded with css3, but since it's not and it's a rectangular image, the shadow will also be a rectangle. — mreq, Jan 01 '12 at 15:25
Time consuming task indeed, and interesting question, however I'm afraid it will be even more time consuming to try to do it programatically. — Christofer Eliasson, Jan 01 '12 at 15:28
You could do this using canvas but it would be hard. You'd probably have to iterate through each pixel and identify the boundary of the bottle (i.e. left to right on each row, find first one that's not transparent, then repeat right to left on each row.) You could then make all those pixels green, then add take 1 off the x coordinates for the left half, and add one to the rights, and make slightly less green etc. Thing is, that wouldn't look the same because of the curves... Hmmm... I think this is a hard problem! — Rich Bradshaw, Jan 01 '12 at 15:32
@RichBradshaw +1; would've tried some canvas magic as well, but I think I'd have retreated soon — mreq, Jan 01 '12 at 15:34
Are there really no solution for this issue ... only canvas??? — Aram Mkrtchyan, Jan 01 '12 at 15:38
@AramMkrtchyan: I think you could possibly record a macro to photoshop or something and store the normal and glowing version.. — mreq, Jan 01 '12 at 15:44
I might actually have a go at this in canvas at some point - thinking about it, I can see how you might do it, but there will of course be the limitation that it will only work in newer browsers, so won't perhaps be as useful as you'd imagine. — Rich Bradshaw, Jan 01 '12 at 15:50
Any chance you could put up the transparent png somewhere? I doubt I'll actually get the time to get it working, but I've been meaning to play with canvas at some point, and this seems like a good excuse. — Rich Bradshaw, Jan 01 '12 at 16:25
@RichBradshaw: there are canvas-enabling jquery libs for older browsers — mreq, Jan 01 '12 at 16:34
Take note of my post below. I created a DEMO for you. To change the glow all you need to do is change the background color of a DIV. — wwwroth, Jan 01 '12 at 18:50
Anyone actually tried to fix this with canvas? I would love to use it. — MrGlass, Aug 14 '12 at 20:02

score 94 · Answer 1 · edited Mar 02 '22 at 12:43

94

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

edited Mar 02 '22 at 12:43

Rman__

135
1
12

answered Jan 10 '13 at 14:29

Jacques Snyman

4,115
1
29
49

Doesn't work on my FF31, but it does on my Chrome. Is there any explanation of some sort that explains the hows and whys? – Mave May 28 '14 at 12:01
2

According to https://developer.mozilla.org/en-US/docs/Web/CSS/filter?redirectlocale=en-US&redirectslug=CSS%2Ffilter#Gecko_notes CSS filter is not supported in Firefox yet. – Jacques Snyman May 29 '14 at 07:19
1

Indeed. I'll have a look at what changed and possibly update the answer – Jacques Snyman Oct 05 '16 at 09:13
I have updated the code and related fiddle to reflect updated support in firefox and chrome – Jacques Snyman Aug 18 '17 at 08:43
You say filter(box-shadow) but then your code uses drop-shadow. Also the link you shared is dead. I'm confused. – Jugdish Feb 18 '22 at 06:59
Apologies. The code was updated to fix chrome compatibility issues but the text before it was never updated. I've fixed it now. drop-shadow is the correct filter to use. I'll remove the link from the answer – Jacques Snyman Mar 01 '22 at 09:50

score 8 · Answer 2 · edited Nov 09 '17 at 13:59

8

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

edited Nov 09 '17 at 13:59

Shea Hunter Belsky

2,815
3
22
31

answered Aug 20 '13 at 10:40

unijad

163
1
4

Yes that is pretty cool!! Thanks for that!! I was trying for hours to get Raphael to work, but this is so much simpler and better – Nick Apr 01 '14 at 19:40

score 7 · Answer 3 · answered Jan 27 '17 at 18:01

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/

BRO. I have to tell you this: YOU ARE A GENIUS. I dont even need this feature in CSS/JS. I want this to use it in a canvas for an android application. I was thinking about iterating pixels and recognizing what is an edge, when i read your answer i felt really dumb. Thanks — GabrielBB, Nov 15 '18 at 19:21

wwwroth · Answer 4 · 2012-01-01T18:49:30.167

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.

score 1 · Answer 5 · answered May 20 '14 at 04:22

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.

score 1 · Answer 6 · answered Feb 15 '17 at 21:29

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.

score 0 · Answer 7 · answered Jan 06 '14 at 23:36

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

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

7 Answers7

Linked

Related