Cara Membuat Animasi Grayscale pada Gambar

Halo 🙂 , di artikel kali ini akan saya share panduan mengenai bagaimana Cara Membangun Animasi Grayscale di Gambar, animasi grayscale ini yakni animasi dimana perubahan warna di suatu objek, disini saya menggunakan sebuah gambar selaku 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 bikin 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>

Di kode img silahkan kalian isikan dengan gambar, setelah itu kita lanjutkan bagi kode CSS3 bagi membangun 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 segala kode diatas diketikan, simpan file nya terlebih dahulu, kemudian coba jalankan di browser masin-masing dan lihat hasilnya.

Baiklah, demikianlah panduan mengenai Cara Membangun Animasi Grayscale di Gambar, semoga bermanfaat, amin.

 

Sumber https://kursuswebsite.org