Cara Membuat Gambar Animasi dengan Efek Hover CSS

Pada postingan kali ini saya akan berbagi tips cara membuat gambar animasi dengan efek hover pada gambar menggunakan CSS.

Agar nampak seperti gambar animasi, kita harus membuat dua buah gambar yang ukurannya identik, yang akan ditampilkan scara bergantian dengan menggunakan kode CSS yaitu dengan image link dan image hover, jadi gambar yang pertama akan ditampilkan sebagai link dan gambar yang kedua ditampilkan sebagai hover/ jika gambar di dekati mouse.

Untuk membuat efek tersebut, kali ini saya akan menjelaskan berikut contoh - contohnya sebagai berikut:

Mempersiapkan 2 buah gambar yang identik, contoh:

Contoh Gambar 1

Contoh Gambar 2
Copy dan pastekode CSS berikut ke dalam postingan tapi dalam keadaan mode "HTML" bukan mode "Compose" :
<style type="text/css">
.gambar a {
   float:left;
   display:block;
   background:transparent url(http://3.bp.blogspot.com/-rKaiyKBYUiI/T9wqgDX0v4I/AAAAAAAABlo/xvFCZ0GXiG0/s400/GAMBAR-1.jpg) 0 0 no-repeat;
}
.gambar a:hover{
   border-bottom:none;
   outline:none;
   background:transparent url(http://1.bp.blogspot.com/-I9ud-SoaGdQ/T9wqgWfdYMI/AAAAAAAABl0/7O7EyVeYFrc/s400/GAMBAR-2.jpg) 0 0 no-repeat;
}
</style>
Masukkan kode HTML berikut untuk menampilkan Gambarnya
<div class="gambar">
<a href='http://www.jual-rebanamarawis.com'></a>
</div>
Lihat pratinjau postingan, kemudian siap untuk dipublish

Hasilnya akan tampak seperti gambar berikut:

Keterangan:

Kode yang berwarna Merah diganti dengan alamat URL yang akan ditampilkan untuk Gambar Link, pada saat mosu tidak berada di atas gambar.
Kode yang berwarna Merah diganti dengan alamat URL yang akan ditampilkan untuk Gambar Hover / gambar yang ditampilkan pada saat mosu diletakkan diatas gambar
Kode yang berwarna ungu diganti dengan Link tujuan, atau alamat url yang akan dibuka jika gambar di klik
Atribut seperti posisi, border, ukuran, dan outline imagedapat diedit sesuai dengan kebutuhan

Demikian postingan kali ini mengenai cara membuat gambar animasi dengan efek hover pada gambar menggunakan CSS. semoga bermanfaat.

Tutorial Blogspot