Efek Hover Gambar Dengan CSS

Referensi: (Indahnya Berbagi) mengenai "Membuat Effect Hover Pada Image Dengan CSS"

Di sini saya menggunakan dua buah gambar yang berbeda. Gambar pertama nantinya akan digunakan sebagai gambar link sedangkan gambar kedua adalah gambar hover (ketika mouse mendekat).

Langkah pertama untuk membuat effect hover gambar dengan CSS adalah mempersiapkan dua buah gambar yang berbeda. Misalnya di sini saya membuat gambar 1 (LINK) dan gambar 2 (SUKSES). Keduanya bukan huruf tetapi gambar. Upload kedua gambar tersebut kemudian copy kedua URL gambar tersebut untuk ditempatkan pada kode CSS.

Di bawah ini saya coba memberi dua buah contoh kode CSS dan HTML yang berbeda untuk membuat effect hover gambar dengan CSS. Kedua cara tersebut akan menghasilkan tampilan yang sama.

Gambar-link :

Gambar-hover :

Kode CSS 1

<style type="text/css">  
.gambar a {float:left;display:block;width:260px;height:93px;background:transparent url(URL gambar-link) 0 0 no-repeat;}
.gambar a:hover{border-bottom:none;outline:none;background:transparent url(URL gambar-hover) 0 0 no-repeat;}</style>

Kode HTML 1

<div class="gambar"><a href='Link URL'></a></div>

Kode CSS 2

<style type="text/css">  a.gambar {    float:left;    display:block;    width:260px;height:93px;    background:transparent url(URL gambar-link) 0 0 no-repeat; }  a.gambar:hover{    border-bottom:none;    outline:none;    background:transparent url(URL gambar-hover) 0 0 no-repeat; }  </style>

Kode HTML 2

<a class="gambar" href="Link URL"></a>

Tampilan setelah di-publish akan sepertidi bawah (coba Anda dekatkan mouse pada gambar tersebut!)

Pada Kode CSS di atas, Anda bisa merubah posisi, border, ukuran, dan outline image sesuai kebutuhan, namun pada intinya adalah seperti itu dimana gambar-link disimpan pada kode "a" dan gambar-hover disimpan pada kode "a:hover".

Selamat Mencoba !