2

This is a small question. If you go to www.thumbtack.com/jobs, and go below to their sponsors. you can see that at first you cant see the color in the names of the sponsors but when you hover over them you can see the colors appear. Can someone tell me how to do this. I am not really sure what to search on google(like what keywords to use for it). I have tried to use the inspect element but couldn't figure out how there are doing it. Any help will be greatly appreciated.

Nishan Hitang
  • 855
  • 3
  • 10
  • 36
user2636368
  • 622
  • 4
  • 10
  • 20
  • Alternating images in the :hover state? – DevlshOne Oct 09 '13 at 03:20
  • so there are two different images? when I looked through the inspect element it just looked like they used one image for both the states – user2636368 Oct 09 '13 at 03:23
  • See filters. http://stackoverflow.com/questions/12262971/toggle-desaturation-on-image-onclick-in-css-javascript – zombiehugs Oct 09 '13 at 03:26
  • @user2636368 They are using the second approach given by Matt in the answer below. You can look carefully at the background image on the site and see the grey version above the colored. This technique generally performs better than others as well – Zach Saucier Oct 09 '13 at 03:27
  • @user2636368 Please link a snippet of the website's code so that this question will be relevant in the future! (if you change your website's code, it won't make any sense for future inquirers) – Nightfirecat Oct 09 '13 at 03:28
  • Yes it is the one image but the position is changed. See CSS Sprites: http://css-tricks.com/css-sprites/ @Matt Patenaude answer does cover this in the second part. – Jon P Oct 09 '13 at 03:29
  • @user2636368 Not to be *that guy*, but it's been a few days since there's been any activity on this question; if one of the answers below satisfies what you're looking for, you should accept it! Otherwise, clarify what further information you require so we can help. :) – Matt Patenaude Oct 16 '13 at 05:19

2 Answers2

11

The most broadly compatible way to do this in CSS is using separate images — one set of grayscale images, and one set of full-color images, which you switch between with the CSS :hover pseudoclass (ordinarily using the background-image property), a la:

.sponsor {
    background-image: url('gray.png');
}

.sponsor:hover {
    background-image: url('color.png');
}

You can achieve this with a single image if you like by putting both a grayscale and color version into a single image, and moving it around kind of like a "window" onto the image (a technique known as CSS Sprites, as pointed out by Jon P). For example, if the logos are 200x100, create a 200x200 image with gray on top and color on bottom, and do something like:

.sponsor {
    width: 200px;
    height: 100px;
    background-image: url('logos.png');
    background-position: 0px 0px;
}

.sponsor:hover {
    background-position: 0px -100px;
}

Of the image-based solutions, this one is preferable, because as Jon pointed out, it reduces the page load time, and also prevents lag when you mouseover the image for the first time. In addition, it's one fewer HTTP request, which can make an important difference on high-latency connections (like cell phone data connections).

If, however, you're targeting relatively new browsers, you might be able to use CSS Filters:

.sponsor {
    filter: grayscale(1.0);
}

.sponsor:hover {
    filter: none;
}

Unfortunately, this currently only works in Safari, Chrome, new versions of Opera, and other WebKit-based browsers. It is also currently a prefixed property, so you will instead need to use it as -webkit-filter.

Matt Patenaude
  • 4,497
  • 1
  • 22
  • 21
  • 2
    This is a great rundown of the css only solutions. I'd just like to add in that SVG filters are a really good companion to this, and can help fill in the gaps in browser support that css alone can't cover. Here's an article to put that into a little more detail: http://demosthenes.info/blog/532/ – Blake Mann Oct 09 '13 at 03:28
  • +1 for SVG, it's a fantastic — and relatively widely-supported — technology. It's probably also worth mentioning that there are canvas solutions to this problem as well, but I won't include a link because a) I don't have one, and b) it's the worst of these solutions for complexity. – Matt Patenaude Oct 09 '13 at 03:31
  • 1
    See CSS Spites for the second option (http://css-tricks.com/css-sprites/). This is preferable to two seperate images for several reasons: more efficient, no lag while the hover image loads, just to name two. – Jon P Oct 09 '13 at 03:31
0

You can do it with CSS3:

.object {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: url(grayscale.svg);
 /* Firefox 4+ */
    filter: gray;
 /* IE 6-9 */;
}

.object:hover {
    -webkit-filter: none;
    -moz-filter: none;
    -ms-filter: none;
    -o-filter: none;
    filter: none;
    filter: none;
    filter: none;
}

Or you can use background: url() and change it on hover in the same way.

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
AxelPAL
  • 1,047
  • 3
  • 12
  • 19
  • 1
    This isn't strictly correct: only WebKit browsers currently implement `filter`, as `-webkit-filter`. Mozilla only implements it for SVG filters, and Opera implemented it after switching to WebKit (and thus, it's called `-webkit-filter` there too). Microsoft's `filter` means something else, is non-standard, and does not support grayscale. https://developer.mozilla.org/en-US/docs/Web/CSS/filter – Matt Patenaude Oct 09 '13 at 03:41