Efek Mengubah Warna pada Gambar

27/02/2018    Risman Hakim    203     Website

Efek Mengubah Warna pada Gambar - Tutorial berikut yang akan saya bagikan yaitu mengenai efek mengubah warna pada sebuah objek, dimana akan terjadi perubahan warna ketika kita melakukan hover atau menyorot kursor terhadap gambar. Pada kasus ini, saya akan menggunakan CSS untuk melakukan efek perubahan warna terhadap objek yakni gambar. Baik, langsung saja kita akan mulai praktekan tutorial Efek Mengubah Warna pada Gambar berikut ini.

Langkah 1 : Efek Mengubah Warna pada Gambar

Karena pada kasus yang kita buat menggunakan objek gambar sebagai efeknya, untuk itu sebelum memulai pada penulisan sintak - sintak, silahkan kalian siapkan 1 gambar sebagai bahannya. Silahkan kalian bisa menggunakan gambarnya dibawah ini.

Efek Mengubah Warna pada Gambar

Langkah 2 : Efek Mengubah Warna pada Gambar

Langkah selanjutnya, barulah kita mulai pada tahap penulisan sintak - sintaknya, sintak pertama yang kalian harus ketikan yaitu membuat struktur awal dan menyisipkan gambarnya dengan sintak HTML berikut ini.

<body>
    <div class="wrapper">
        <img src="images/panda.jpg" />
        <div class="text">
            <h4>Hallo Panda...</h4>
        </div>
    </div>
</body>

Langkah 3 : Efek Mengubah Warna pada Gambar

Selanjutnya, setelah membuat strukturnya seperti diatas, kita akan ketikan sintak CSS untuk membuat efek perubahan warna pada gambarnya. Ketikan sintak CSSnya berikut ini.

@import url('https://fonts.googleapis.com/css?family=Lobster');
body {
    font-family: 'Lobster', cursive;
    background: #DAD9DE;
    color: #DAD9DE;
}
.wrapper {
    width: 400px;
    margin: auto;
}
.text {
    margin-top: -22px;
    background: #020003;
    height: 35px;
    padding: 0 10px;
}
h4 {line-height: 35px;}
img {
    width: 400px;
    filter: gray;
    -webkit-filter: grayscale(1);
    -webkit-transition: all .8s ease-in-out;  
}

img:hover {
    filter: none;
    -webkit-filter: grayscale(0);
    /*-webkit-transform: scale(1.01);*/
}

Setelah semua sintak diatas telah diketikan, simpan filenya kemudian kalian bisa buka pada browser masing - masing dan lihat hasinya, dan jika kalian arahkan kursor terhadap gambar akan terjadi perubahan warna seperti diawal saya jelaskan. Selesai

Efek Mengubah Warna pada Gambar

Bagaimana, cukup mudah bukan ? baiklah, cukup sekian tutorial sederhana mengenai Efek Mengubah Warna pada Gambar, semoga tutorial ini bisa bermanfaat. Selamat mencoba :)

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More