Mengubah gambar pada mouse hover dengan menggunakan CSS

Oke, setelah lama tidak menulis tutorial baru (lagi buat website baru :D) sekarang saya akan menulis artikel lagi. Kali ini kita akan mempelajari bagaimana membuat efek mouse hover pada images. Membuat gambar yang berubah, sebenarnya cukup mudah apabila kita menggunakan Javascript, tapi kali ini saya akan mengajarkannya menggunakan CSS saja, tanpa Javascript sama sekali.

Mengubah Posisi Background

Cara yang akan kita gunakan disini adalah mengubah posisi background. Jadi kita memiliki gambar tombol ketika berada dalam posisi normal dan ketika mouse hover dalam 1 gambar. Nah nanti kita tinggal mengubah posisi background pada CSS nya saja sehingga terkesan tombol kita berubah. Bingung? lihat dulu contohnya seperti dibawah ini

Oke pertama-tama anda save tombol dibawah ini, simpanlah dengan nama tombolhover.jpg
Contoh Tombol

Setelah itu buatlah file index.html dan isilah dengan kode berikut ini:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mouse Hover hanya dengan CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="Mouse Hover, CSS" />
<meta name="Description" content="Mouse Hover hanya dengan CSS" />
<style type="text/css" media="all">
a.tombol {
border:0;
display: block;
width: 107px;
height: 31px;
background: url(tombolhover.jpg) no-repeat;
text-decoration: none;
}
a.tombol:hover {
background-position: 0 -31px;
}
</style>
</head>
<body>
<a href="http://www.dhimasronggobramantyo.com" class="tombol"></a>
</body>
</html>

Silahkan dicoba file index.htmlnya, mudah kan? oke sekarang saya jelaskan kenapa bisa begitu.

Fungsi CSS background-position

Jika anda perhatikan pada CSS pada class tombol a.tombol, kita mengatur width:107px dan height:31px, padahal width dan height gambar kita ukurannya 107px x 62px. Sehingga pada background: url(tombolhover.jpg) yang ditampilkan hanya selebar 107 px dan setinggi 31px, dimana kita akan dapatkan gambar yang paling atas saja. Lebih jelasnya silahkan lihat ukuran gambarnya dibawah ini.
Ukuran Tombol

Jadi karena kita menampilkan background 31px yang paling atas, maka yang tampil adalah tombol yang atas.

Berikutnya untuk mouse hovernya a.tombol:hover kita menggunakan background-position: 0 -31px. Maksudnya ini kita mengubah tampilan background pada koordinat y sebesar -31px. Jadi gambar yang ditampilkan berkurang 31px sehingga yang tampil adalah tombol yang bawah.

Free Template Blogger collection template Hot Deals BERITA_wongANteng SEO theproperty-developer