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
- Cara Kompres CSS, HTML, JavaScript Template Blog
- Cara Kompressi Gambar Agar Loading Blog Cepat
- Cara Membuat Blockquote pada Posting Blog dengan CSS
- Cara Membuat Bullets dan Numbering Tag HTML pada Posting Blog
Produk keren lainnya:
