advanced code snippet search

Posted By

alvaroisorna on 06/11/07


Tagged

css crossbrowser filter img grayscale


Versions (?)

Who likes this?

13 people have marked this snippet as a favorite

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


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

Expand | Embed | Plain Text 
  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.