Obraz w skali szarości z CSS i ponownym kolorem po najechaniu myszą?

86

Chcę wziąć ikonę, która jest kolorowa (i będzie linkiem) i obrócić ją w skali szarości, aż użytkownik umieści kursor myszy nad ikoną (gdzie następnie pokoloruje obraz).

Czy jest to możliwe iw sposób obsługiwany przez przeglądarki IE i Firefox?

Meta
źródło
2
Prawie zduplikowane ... stackoverflow.com/q/609273/670377
Tom Sarduy
czy nie byłby to ciekawszy efekt, gdybyś zrobił to na odwrót? czy kursor myszy będzie czymś w rodzaju magicznej różdżki, która wnosi kolor do mrocznego świata?
X10D

Odpowiedzi:

242

Istnieje wiele metod osiągnięcia tego celu, które szczegółowo opiszę na kilku przykładach poniżej.

Czysty CSS (przy użyciu tylko jednego kolorowego obrazu)

img.grayscale {
  filter: url("data:image/svg+xml;utf8,<svg 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>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

img.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}

Możesz znaleźć artykuł dotyczący tej techniki tutaj .

Czysty CSS (używając skali szarości i kolorowych obrazów)

Takie podejście wymaga dwóch kopii obrazu: jednej w skali szarości, a drugiej w pełnym kolorze. Używając :hoverpsuedoselectora CSS , możesz zaktualizować tło elementu, aby przełączać się między nimi:

#yourimage { 
    background: url(../grayscale-image.png);
}
#yourImage:hover { 
    background: url(../color-image.png};
}

Można to również osiągnąć, używając hover()w ten sam sposób efektu kursora opartego na JavaScript, takiego jak funkcja jQuery .

Rozważ bibliotekę innej firmy

Desaturate biblioteka jest wspólna biblioteka, która pozwala na łatwe przełączanie między wersji pełnej skali szarości i kolorze wersji danego elementu lub obrazu.

Rion Williams
źródło
Jeśli jednak wspomniane obrazy muszą być połączone z inną witryną, jak można to zrobić, jeśli obrazy są ustawione jako tła?
Meta
1
To zadziała w ten sam sposób, sprawdź demo w sekcji 1. Jeśli masz inne pytania, chętnie pomogę.
Rion Williams
1
chłopaki, czy ktoś zauważył, że to nie działa na safari? Właśnie sprawdziłem i znalazłem ten problem, czy jest jakiś sposób, aby go rozwiązać?
Gajen,
13

Odpowiedział tutaj: Konwertuj obraz do skali szarości w HTML / CSS

Nie musisz nawet używać dwóch obrazów, które brzmią jak ból lub biblioteka do manipulacji obrazami, możesz to zrobić z obsługą wielu przeglądarek (aktualne wersje) i po prostu użyj CSS. Jest to metoda stopniowego ulepszania, która po prostu wraca do wersji kolorystycznych w starszych przeglądarkach:

img {
  filter: url(filters.svg#grayscale);
  /* Firefox 3.5+ */
  filter: gray;
  /* IE6-9 */
  -webkit-filter: grayscale(1);
  /* Google Chrome & Safari 6+ */
}
img:hover {
  filter: none;
  -webkit-filter: none;
}

i filter.svg w ten sposób:

<svg 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>
Uriah Blatherwick
źródło
6

Używam następującego kodu na http://www.diagnomics.com/

Płynne przejście od cz / b do koloru z efektem powiększenia (skala)

    img.color_flip {
      filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
      filter: gray; /* IE5+ */
      -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
      -webkit-transition: all .5s ease-in-out;
    }

    img.color_flip:hover {
      filter: none;
      -webkit-filter: grayscale(0);
      -webkit-transform: scale(1.1);
    }
Stefana Gruenwalda
źródło
Działa świetnie w przeglądarkach webkit! Twój kod nie działa u mnie w przeglądarce Firefox, ale z drugiej strony myślę, że ma to coś wspólnego z plikiem SVG i używam bitmapy w tym skrzypcach jsfiddle.net/coolwebs/num04rya/10 Coś dziwnego - przejście Efekt w Safari sprawia, że ​​obraz „szarpie” przy kumulacji…
Ryan Coolwebs
0

Możesz użyć duszka, który ma zapisane w nim obie wersje - kolorową i monochromatyczną.

feeela
źródło