Membuat Efek Animasi Warna Pada Gambar Dengan CSS3

Halo, ketemu lagi dengan saya, apa kabarnya ? Semoga baik yah, amin.

Pada kesempatan kali ini saya akan berbagi tutorial mengenai Cara Membuat Efek Animasi Warna Pada Gambar Dengan CSS3, Nah sekarang ini banyak sekali website yang menggunakan efek bermacam-macam, Nah kali ini saya akan membuat efek transisi warna pada gambar menjadi lebih menarik, seperti apa cara membuat nya. Yuk simak langkah-langkah berikut.

1. Siapkan terlebih dahulu satu buah gambar bebas apa saja.

2. kemudian buka teks editornya lalu ketikan kode HTML berikut:

<div class="column1 my-cell">
	<img src="http://imcreator.com/wp-content/uploads/2014/01/wpid-Featured_Picture22.jpg" alt="">
	<div class="desc">
		<h1>DUMETschool web and mobile training</h1></p>
	</div>
</div>

3. Pada bagian img silahkan masukan gambar yang sudah di siapkan tadi.

4. Setelah itu lanjutkan lagi untuk kode CSS nya, silahkan ketikan kode CSS berikut:

.column1{
position: relative;
}
.column1 img{
width: 100%;
height: auto;
}

.desc{
position: absolute;
top: 50%;
left: 5%;
}
.desc h1{
color: #fff;
font-family: 'Hammersmith One', sans-serif;
font-size: 20px;
}
.desc a{
color: #ddd;
}

.column2{
padding: 40px;
}
.column2 p{
margin: 20px 0;
}
.column2 ul{
margin-left: 15px;
}
.column2 ul li{
border-bottom: 1px solid #ddd;
padding: 5px 0;
}


/* Animation */
@-webkit-keyframes pulse {
   0% { -webkit-filter: contrast(400%) grayscale(0%); }
100% { -webkit-filter: contrast(100%) grayscale(100%); }
}
@-webkit-keyframes mover	{
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}

.column1{
-webkit-animation: pulse 3s alternate infinite
}
.column1:hover	{ -webkit-filter: contrast(300%) hue-rotate(80deg) grayscale(100%)

5. Kalo sudah jangan lupa disimpan, kemudian coba jalankan di browsernya masing-masing dan lihat hasilnya. Selesai

Bagus yah ? 🙂

Baik sampai disini tutorial mengenai Membuat Efek Animasi Warna Pada Gambar Dengan CSS3, Semoga bermanfaat sampai ketemu dilain kesempatan.

Selamat Mencoba 🙂