Sliding Door with one image?

Sliding Door with one image?

Hi all

Using the sliding door technique I can change an image on hover like so.

Is there another way to get the same effect without two images.

Is there a CSS way to make an images Greyscale and then return it’s color
on hover.

<!DOCTYPE html>

	<meta content="text/html; charset=utf-8"/>

	<style type="text/css" media="screen">
	   background:url('1.jpg') top left no-repeat;
	   background-position:bottom left;


  <a href="#">boat</a>


Well it may be two images but it’s in one file :). AFAIK there is no way just to give some sort of gray overlap to the image. The best bet would just to be to have that 2nd image in the file and reference that (as done in the above link/code :).

If you don’t want to load another image and provide for more advanced users, you could create a div with a higher z-index that is semi-transparent and a color of black. Upon hover, set it to display:none; and that would be a quick fix that would load a fraction of the image atm.



You can do it simply in IE with the proprietary grayscale filter.

filter: gray; /* IE5+ */

You could then add support for Firefox with an svg filter:

a:hover img {
	-webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
	filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
	filter: gray; /* IE5+ */

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
    <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"/>

Doesn’t work in Safari yet so you could just reduce transparency for safari a little.

Here’s a live demo: