SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    382
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

    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>

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    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 .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,479
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •