Posted By

alvaroisorna on 06/11/07


Tagged

css crossbrowser filter img grayscale


Versions (?)

Who likes this?

15 people have marked this snippet as a favorite

SpinZ
joseluis
fragholrok
vali29
aziz
ds
kcmr
dfaulty
ginoplusio
cwulff
b1tstream
jarc100
phongjalvn
Beppoi
atulkransingh


grayscale img with css crossbrowser


 / Published in: CSS
 

this snippet modifies a SPAN tag inside a A link so that it covers a nearby IMG and applies a semi-transparent gray layer over it, making the IMG to be grayscaled

  1. <!-- HTML -->
  2. <a class="a-thumb"><img src="/img/proxy-thumb.gif" /><span> </span></a>
  3.  
  4. /* CSS */
  5. a.a-thumb {
  6. border: 1px solid black;
  7. position: relative;}
  8. a.a-thumb img {
  9. width: 60px;
  10. height: 60px;
  11. border: 0;}
  12. a.a-thumb span {
  13. background-color: #000000;
  14. position: absolute;
  15. top: 0;
  16. left: 0;
  17. width: 60px;
  18. height: 60px;
  19. z-index: 100;
  20. filter: alpha(opacity=20);
  21. -moz-opacity: 0.2;
  22. opacity: 0.2;}

Report this snippet  

You need to login to post a comment.