Sliding Door with one image?

**ttmt** · Mar 25, 2012 06:58

Sliding Door with one image?

Hi all

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

http://www.ttmt.org.uk/forum/

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.

Code:

<!DOCTYPE html>

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

	<title>untitled</title>
	<style type="text/css" media="screen">
	 *{
	   margin:0;
	   padding:0;
	 }
	 a{
	   display:block;
	   margin:50px;
	   background:url('1.jpg') top left no-repeat;
	   width:339px;
	   height:235px;
	   text-indent:-999em;
	 }
	 a:hover{
	   background-position:bottom left;
	 }
	</style>
</head>

<body>

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

</body>
</html>

**RyanReese** · Mar 25, 2012 07:20

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

.

**TehYoyo** · Mar 25, 2012 14:14

Originally Posted by RyanReese

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.

~TehYoyo

**Paul O'B** · Mar 26, 2012 04:30

Hi,

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

Code:

filter: gray; /* IE5+ */

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

Code:

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

Code:

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

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

Here's a live demo:

http://www.pmob.co.uk/temp/grayscale-filter.htm
http://www.pmob.co.uk/temp/grayscale-filter2.htm

User Tag List

Thread: Sliding Door with one image?

Thread Tools

Display

Sliding Door with one image?

Bookmarks

Bookmarks

Posting Permissions