advanced search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

alvaroisorna on 06/11/07


Tagged

css crossbrowser filter img grayscale


Versions (?)


Who likes this?

7 people have marked this snippet as a favorite

SpinZ
joseluis
fragholrok
vali29
aziz
ds
kcmr


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


Plain TextExpand 
  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.