Cara Membuat Animasi Grayscale pada Gambar

Halo 🙂 , pada artikel kali ini akan saya bagikan tutorial mengenai bagaimana Cara Membuat Animasi Grayscale pada Gambar, animasi grayscale ini adalah animasi dimana perubahan warna pada suatu objek, disini saya menggunakan sebuah gambar sebagai objek nya, Nah penasaran seperti apa animasi nya, berikut langkah-langkahnya.

Sebelum kita praktik, silahkan kalian siapkan satu buah gambar bebas dengan ukuran 350×200 pixel, nah selanjut nya baru kita buat struktur dengan kode HTML berikut.

<div class="wraper">
<div class="box">
  <div class="box-color">
    <img src="http://i1.wp.com/www.inautonews.com/wp-content/uploads/2013/04/bugatti-veyron-super-sport.jpg?resize=350%2C200" 
class="color" />
  </div>
    <img src="http://i1.wp.com/www.inautonews.com/wp-content/uploads/2013/04/bugatti-veyron-super-sport.jpg?resize=350%2C200" 
class="gray" />
</div>
</div>

Pada kode img silahkan kalian isikan dengan gambar, setelah itu kita lanjutkan untuk kode CSS3 untuk membuat animasi grayscale nya. Berikut kode nya.

.wraper {
	width: 500px;
	margin: auto;
	margin-top: 30px;
}
img.gray { 
  -webkit-filter: grayscale(100%); 
  filter: grayscale(100%); 
}
.box {
  width: 350px;
  height: 200px;
  position: relative;
}
img {
  width: 350px;
  height: 200px;
  position: absolute;
  bottom: 0;
}

.box-color {
  overflow: hidden;
  width: 350px;
  position: absolute;
  height: 0;
  left: 0;
  bottom: 0;
  -webkit-transition: height 2s; 
  transition: height 3s;
  z-index: 1;
}
.box:hover .box-color {
  height: 100%;
}

Nah, setelah semua kode diatas diketikan, simpan file nya terlebih dahulu, kemudian coba jalankan pada browser masin-masing dan lihat hasilnya.

Baiklah, sekian tutorial tentang Cara Membuat Animasi Grayscale pada Gambar, semoga bermanfaat, amin.