Gambar Skala Abu-abu dengan CSS & pewarnaan ulang saat mouse-over?

87

Saya mencari untuk mengambil ikon yang diwarnai (dan akan menjadi tautan) dan mengubahnya menjadi skala abu-abu sampai pengguna menempatkan mouse mereka di atas ikon (di mana kemudian akan mewarnai gambar).

Apakah ini mungkin dilakukan, dan dengan cara yang didukung IE & Firefox?

css mouseover grayscale Meta
sumber
2
Hampir digandakan ... stackoverflow.com/q/609273/670377
Tom Sarduy
bukankah akan menjadi efek yang lebih menarik jika Anda melakukannya dengan cara lain? biarkan kursor mouse menjadi seperti tongkat ajaib yang membawa warna ke dunia gelap?
X10D

Jawaban:

245

Ada banyak metode untuk mencapai ini, yang akan saya jelaskan dengan beberapa contoh di bawah ini.

CSS murni (hanya menggunakan satu gambar berwarna)

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

Tampilkan cuplikan kode

Anda dapat menemukan artikel yang berhubungan dengan teknik ini di sini .

CSS Murni (menggunakan gambar grayscale dan berwarna)

Pendekatan ini membutuhkan dua salinan gambar: satu dalam skala abu-abu dan yang lainnya berwarna penuh. Dengan menggunakan CSS :hoverpsuedoselector, Anda dapat memperbarui latar belakang elemen Anda untuk beralih di antara keduanya:

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

Tampilkan cuplikan kode

Ini juga bisa dilakukan dengan menggunakan efek hover berbasis Javascript seperti hover()fungsi jQuery dengan cara yang sama.

Pertimbangkan Perpustakaan Pihak Ketiga

The desaturate perpustakaan adalah perpustakaan umum yang memungkinkan Anda untuk dengan mudah beralih di antara versi grayscale dan versi lengkap berwarna dari elemen atau gambar yang diberikan.

Rion Williams
sumber
Jika gambar tersebut perlu ditautkan ke situs lain, bagaimana ini bisa dilakukan jika gambar ditetapkan sebagai latar belakang?
Meta
1
Ini akan bekerja dengan cara yang sama, periksa demo di bawah bagian 1. Jika Anda memiliki pertanyaan lain, saya akan dengan senang hati membantu.
Rion Williams
1
teman-teman, apakah ada yang memperhatikan bahwa ini tidak berfungsi di safari? Saya baru saja memeriksa dan menemukan masalah ini, apakah ada cara untuk mengatasinya?
Gajen
13

Dijawab di sini: Ubah gambar menjadi grayscale dalam HTML / CSS

Anda bahkan tidak perlu menggunakan dua gambar yang terdengar seperti sakit atau perpustakaan manipulasi gambar, Anda dapat melakukannya dengan dukungan lintas browser (versi saat ini) dan hanya menggunakan CSS. Ini adalah pendekatan peningkatan progresif yang hanya kembali ke versi warna pada browser lama:

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

dan filter.svg seperti ini:

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

Saya menggunakan kode berikut di http://www.diagnomics.com/

Transisi halus dari b / w ke warna dengan efek pembesar (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);
    }
Stefan Gruenwald
sumber
Berfungsi dengan baik di browser webkit! Kode Anda tidak berfungsi untuk saya di browser Firefox tetapi sekali lagi, saya pikir itu ada hubungannya dengan file SVG dan saya menggunakan bitmap di biola ini jsfiddle.net/coolwebs/num04rya/10 Sesuatu yang aneh - transisi efek di Safari membuat gambar 'brengsek' saat rollover ....
Ryan Coolwebs
0

Anda bisa menggunakan sprite yang memiliki kedua versi — yang berwarna dan monokrom — yang disimpan di dalamnya.

feeela
sumber