Dynamic Drive CSS Library- Grayscale Image Gallery

CSS Library

Hosting Discounts

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

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:

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:

<style>

ul.gallery{
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.gallery li{
  display: block;
  width: 200px; /* width of gallery */
  height: 50px; /* portion of each gallery image that's shown initially */
  position: relative;
  -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


ul.gallery li img{
  position: absolute;
  width: 100%;
  border: 10px solid #D8D2A2;
 -webkit-filter: grayscale(1);
  -moz-filter: grayscale(1);
	filter: url(#grayscale); 
  filter: grayscale(1);
	-webkit-transition: all .5s ease-in-out; /* CSS3 transition setting */
	-moz-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}


ul.gallery li:focus{ /* when a LI receives focus (clicked on) */
  z-index: 100;
	outline: none;
	-webkit-transform: rotate(3deg); /* rotate enlarged LI by 3 degrees */
	-moz-transform: rotate(3deg);
	transform: rotate(3deg); 
	pointer-events: none; /* disable pointer events on enlarged LI so thumbnail(s) beneath it can receive those events */
}

ul.gallery li:nth-of-type(even):focus{ /* even LIs that received focus */
	-webkit-transform: rotate(-1deg); /* rotate enlarged LI by -1 degrees instead */
	-moz-transform: rotate(-1deg);
	transform: rotate(-1deg);
}

ul.gallery li:focus img{
  -webkit-transform: scale(2) translateX(80%); /* enlarge focused image and move horizontally */
  -moz-transform: scale(2) translateX(80%);
  transform: scale(2) translateX(80%);
  top: 10px; /* shift enlarged image downwards by 10px */
	outline: none;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4); 
  -webkit-filter: grayscale(0); /* nullify grayscale effect */
  filter: none;
}

ul.gallery li:first-of-type:focus img{ /* first image within list of thumbnails that receives focus */
  top: 80px; /* move image down by 80px so it's not obscured by top of window edge */
}

svg{
	position: absolute;
	visibility: hidden;
}

</style>

The HTML:

<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>
<ul class="gallery" title="Tab after clicking on a thumbnail to cycle though thumbnails">
<li tabindex="1"><img src="media/coconut.jpg" /></li>
<li tabindex="2"><img src="media/desert.jpg" /></li>
<li tabindex="3"><img src="media/horses.jpg" /></li>
<li tabindex="4"><img src="media/ocean.jpg" /></li>
<li tabindex="5"><img src="media/mushroom.jpg" /></li>
<li tabindex="6"><img src="media/angelinasmall.jpg" /></li>
</ul>

Code Info

Rate this code:

Date Posted: 02/04/2015

Revision History: None

Usage Terms: Click here