Immagine in scala di grigi con CSS e ricolorazione al passaggio del mouse?

86

Sto cercando di prendere un'icona colorata (e sarà un collegamento) e trasformarla in scala di grigi finché l'utente non posiziona il mouse sopra l'icona (dove poi colorerà l'immagine).

È possibile farlo e in un modo supportato da IE e Firefox?

css  mouseover  grayscale 
— Meta
fonte
2
Quasi duplicato ... stackoverflow.com/q/609273/670377
— Tom Sarduy
non sarebbe un effetto più interessante se lo facessi al contrario? lasciare che il cursore del mouse sia una specie di bacchetta magica che porta il colore in un mondo oscuro?
— X10D

Risposte:

242

Esistono numerosi metodi per ottenere ciò, che descriverò in dettaglio con alcuni esempi di seguito.

Pure CSS (utilizzando solo un'immagine colorata)

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%);
}

Mostra snippet di codice

Puoi trovare un articolo relativo a questa tecnica qui .

CSS puro (utilizzando una scala di grigi e immagini colorate)

Questo approccio richiede due copie di un'immagine: una in scala di grigi e l'altra a colori. Utilizzando il CSS :hoverpsuedoselector, puoi aggiornare lo sfondo del tuo elemento per alternare tra i due:

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

Mostra snippet di codice

Ciò potrebbe anche essere ottenuto utilizzando un effetto hover basato su Javascript come la hover()funzione di jQuery nello stesso modo.

Considera una libreria di terze parti

La libreria desaturata è una libreria comune che consente di passare facilmente da una versione in scala di grigi a una versione a colori di un dato elemento o immagine.

— Rion Williams
fonte
Se tali immagini devono essere collegate ad altri siti Web, come è possibile farlo se le immagini sono impostate come sfondi?
— Meta
1
Funzionerebbe allo stesso modo, controlla la demo nella sezione 1. Se hai altre domande sarò lieto di aiutarti.
— Rion Williams
1
ragazzi, qualcuno ha notato che questo non funziona in Safari? Ho appena controllato e trovato questo problema, c'è un modo per risolverlo?
— Gajen
13

Risposta qui: Converti un'immagine in scala di grigi in HTML / CSS

Non è nemmeno necessario utilizzare due immagini che suonano come un dolore o una libreria di manipolazione delle immagini, puoi farlo con il supporto del browser incrociato (versioni attuali) e usare semplicemente CSS. Questo è un approccio di miglioramento progressivo che ricade solo sulle versioni a colori sui browser meno recenti:

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;
}

e il file filters.svg come questo:

<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
fonte
6

Uso il seguente codice su http://www.diagnomics.com/

Transizione graduale dal b / n al colore con effetto di ingrandimento (scala)

    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);
    }
— Stefan Gruenwald
fonte
Funziona alla grande nei browser webkit! Il tuo codice non funziona per me nel browser Firefox ma poi di nuovo, penso che abbia qualcosa a che fare con un file SVG e sto usando una bitmap in questo violino jsfiddle.net/coolwebs/num04rya/10 Qualcosa di strano però - la transizione l'effetto in Safari rende l'immagine 'jerk' al rollover ...
— Ryan Coolwebs
0

Puoi usare uno sprite in cui sono memorizzate entrambe le versioni, quella colorata e quella monocromatica.

— feeela
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.