Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:

Advertise Here

CSS Library: Image CSS: CSS3 demos: Here

Grayscale Image Gallery

Author: Dynamic Drive

This CSS image gallery renders the thumbnails initially in grayscale until clicked on to reveal a larger version of an image. You can quickly cycle through the thumbnails using the "Tab" key. The grayscale treatment is made possible thanks to CSS filters, a new feature in CSS3 capable of other common effects such as sepia, blur, invert etc. CSS3 filters are supported in modern versions of Chrome, Firefox, and Safari, though not in IE11 as of yet:

 

 

 

 

To render an element grayscale using CSS, just use the CSS property filter: grayscale(number), accompanied by the usual band of prefixed equivalents:

#grayelement{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
}

The value should be either a percentage between 0 to 100%, or alternatively, 0 to 1 to specify the degree of grayscale. Now, in Firefox (as of FF 31), there is a catch when utilizing CSS filters- you must also define a SVG filter markup on the page in order for the effect to be applied. For the grayscale filter, the SVG filter looks like the following:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">

<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0" />
</filter>

</svg>

Notice the id attribute inside the filter tag. Then, inside your CSS, add the additional line in red to your original CSS:

#grayelement{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: url(#grayscale); /* set URL to id of SVG grayscale filter */
filter: grayscale(100%);
}

To undo a grayscale filter, set filter: grayscale(0), and for FF, it's easiest to set filter: none instead (the alternative is to define another SVG grayscale filter with values='10000, 01000, 00100, 00010').

The CSS:

The HTML:

Notice in the HTML of the menu, each LI carries a tabindex attribute with value in sequential order. This isn't just to enable tabbing through the thumbnails, but also to allow the thumbnail to receive click events. For that reason they should be defined.

Code Info

Rate this code:

Date Posted: 09/04/2014

Revision History: Sept 6th, 2014: Added -webkit- prefixes to CSS3 properties for Apple devices.

Usage Terms: Click here

Your Comments (0)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.


Copyright 2006-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.