Tutorial Gambar Grayscale Dengan CSS

Alhamdulillah, setelah tiga minggu akhirnya bisa kembali membuat tutorial, dan kali ini saya akan membuat tutorial untuk image hover dari grayscaled image menjadi colored image, bahasa mudahnya dari gambar abu-abu menjadi gambar berwarna. Dan berikut screenshot hasil akhirnya nanti

Langkah pertama yang harus kita lakukan tentu saja adalah membuat file index.html. Lalu didalam tag body, tambahkan script berikut ini.

    
Gallery
    
    
    
    

Setelah itu, tambahkan style css agar tampilan menjadi lebih menarik. Copy lalu Paste style berikut ini.

body{
    margin: 0;
    background-color: #F5F5F5;
    font-family: 'Raleway';
    color: #555555;
}

.box{
    margin: 0 auto;
    margin-top: 100px;
    padding: 0 10px;
    width: 470px;
    height: 460px;
    border-radius: 3px;
    background-color: #FFFFFF;
    box-shadow: 1px 1px 1px #DDDDDD;
}

.box h3{
    padding-top: 24px;
    text-align: center;
    color: #5AB6CD;
}

img{
    padding: 10px;
}

Setelah style css ditambahkan, maka akan menghasilkan tampilan seperti screenshot berikut.

Tentu saja effect grayscale belum kita dapatkan, maka dari itu perlu kita tambahkan style berikut ini.

.img-grayscale{
    filter: url("data:image/svg+xml;utf8,#grayscale"); /* Mozilla Firefox */
    -webkit-filter: grayscale(100%); /* Google Chrome dan Apple Safari */
}

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

Effect grayscale ini saya coba dibrowser Mozilla Firefox, Google Chrome, serta Apple Safari dan berjalan dengan lancar. Nah, cukup mudah bukan? Jika masih bingung, jangan ragu untuk meninggalkan komentar ya. Dan jika kalian ingin mengunduhnya serta menggunakannya sebagai bahan untuk belajar, klik link Download dibawah.

Demo Download