Minggu, 12 Januari 2014

Efek Membuat Gambar Warna Menjadi Hitam Putih

Efek Membuat Gambar Warna Menjadi Hitam Putih - Beberapa hari yang lalu saya pernah membahas tentang efek gambar membesar kedalam atau zoom in dan dengan artikel yang sama, maka pembahasan pada artikel ini membahas tentang efek gambar warna menjadi hitam putih. Pada artikel sebelumnya saya telah memberikan sedikit panduan agar mencoba mengedit kode CSS yang ada pada efek gambar tersebut agar menghasilkan efek gambar yang lainnya, atau seperti yang ditampilkan pada gambar berikut ini

Sorot gambar berikut untuk membuat gambar warna menjadi hitam putih
Efek Membuat Gambar Warna Menjadi Hitam Putih

Agar gambar memiliki efek seperti diatas, berikut panduannya

CSS
.image-box {width:100%;text-align:center}
.image-hover {position:relative;display:inline-block;overflow:hidden;}
.image-hover a {text-decoration:none}
.image-hover img {margin:10px}
.img-color-blackwhite img{transition:all 0.6s ease-in-out;-webkit-transition:all 0.6s ease-in-out;-moz-transition:all 0.6s ease-in-out;-ms-transition:all 0.6s ease-in-out;-o-transition:all 0.6s ease-in-out;}
.img-color-blackwhite:hover img{filter:grayscale(100%);-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:url(greyscale.svg#greyscale);filter:gray;}
HTML
Untuk menerapkan kode css efek gambar warna menjadi hitam putih, maka diperlukan kode HTML agar bisa menampilkan efek yang diinginkan. Silahkan salin kode HTML berikut ini, terserah mau diletakkan dimana..
<div class="image-hover img-color-blackwhite">
<img src="http://1.bp.blogspot.com/-t5j4QjJaDWc/Uqb3nxjGHbI/AAAAAAAAB-k/iCreVbyGCd4/s1600/efek-gambar-membesar-zoom-in.png" />
</div>

Catatan: Ganti url gambar sesuai keinginan Anda

Mudah bukan? Nantikan efek gambar lainnya yang akan saya bagikan juga dan tentunya tetap mengutak-atik kode CSS diatas. Okey, semoga artikel Efek Membuat Gambar Warna Menjadi Hitam Putih ini bermanfaat

Efek Membuat Gambar Warna Menjadi Hitam Putih Rating: 4.5 Diposkan Oleh: ana sriwahyuni

11 komentar:

  1. itu klo dibalik hovernya kynya lbh bgs.. tp itu selera sih...

    kunjungan pagi...

    BalasHapus
    Balasan
    1. silahkan mbak Tari di kreasikan sendiri :)

      makasih banyak ya atas kunjungannya

      Hapus
  2. itu klo dibalik hovernya kynya lbh bgs.. tp itu selera sih...

    kunjungan pagi...

    BalasHapus
    Balasan
    1. ya mbak mungkin akan lebih baik kalau di buat dua versi

      Hapus
    2. masih ada banyak versi yang sedang di garap mas :)

      Hapus
  3. makasih mbak , nant isaya coba praktekan

    BalasHapus
    Balasan
    1. silahkan mbak Dwi, semoga berhasil :)

      Hapus
  4. Balasan
    1. makasih mas atas kunjungan serta komentarnya..

      Hapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia