CSS create white glow around image

Question

How can I create a white glow as the border of an unknown size image

User · Answer

tamir  you cna do it with css3 property   img  -webkit-box-shadow  0px 0px 3px 5px  f2e1f2  -moz-box-shadow  0px 0px 3px 5px  f2e1f2  box-shadow  0px 0px 3px 5px  f2e1f2       check the fiddle http   jsfiddle net XUC5q 1   amp  your can generate from here http   css3generator com   If you need it to work in older versions of IE  you can use CSS3 PIE to emulate the box-shadow in those browsers  amp  you can use filter as kyle said like this  filter progid DXImageTransform Microsoft Glow color  red   Strength  5     you can generate your filter from here http   samples msdn microsoft com workshop samples author filter Glow htm

User · Answer

Use simple CSS3  not supported in IE lt 9   img       box-shadow  0px 0px 5px  fff      This will put a white glow around every image in your document  use more specific selectors to choose which images you d like the glow around  You can change the color of course     If you re worried about the users that don t have the latest versions of their browsers  use this    img   -moz-box-shadow  0 0 5px  fff  -webkit-box-shadow  0 0 5px  fff  box-shadow  0px 0px 5px  fff      For IE you can use a glow filter  not sure which browsers support it   img       filter progid DXImageTransform Microsoft Glow Color white Strength 5       Play with the settings to see what suits you

User · Answer

late to the party here  however just wanted to add a bit of extra fun    box-shadow  0px 0px 5px rgba 0 0 0  3   padding 7px    will give you a nice looking padded in image   The padding will give you a simulated white border  or whatever border you have set    the rgba is just allowing you to do an opicity on the particular color  0 0 0 being black   You could just as easily use any other RGB color   Hope this helps someone

User · Answer

Depends on what your target browsers are  In newer ones it s as simple as      -moz-box-shadow  0 0 5px  fff  -webkit-box-shadow  0 0 5px  fff          box-shadow  0 0 5px  fff    For older browsers you have to implement workarounds  e g   based on this example  but you will most probably need extra mark-up

User · Answer

Works like a charm    imageClass     -webkit-filter  drop-shadow 12px 12px 7px rgba 0 0 0 0 5        Voila  That s it  Obviously this won t work in ie  but who cares

User · Answer

You can use CSS3 to create an effect like that  but then you re only going to see it in modern browsers that support box shadow  unless you use a polyfill like CSS3PIE  So  for example  you could do something like this  http   jsfiddle net cany2

[image] CSS: create white glow around image

Examples related to image

Examples related to css

Examples related to border

Examples related to glow