Cara Membuat Efek Hover Yang Bertahap

Efek Hover Pada Gambar sudah biasa kita kenal,
namun kali ini kita mencoba membuat efek hovernya
secara bertahap. Dari awalnya gambar yang
memudar warnanya manakala disorotkan cursor
di atasnya maka gambar tersebut secara bertahap
akan nampak semakin jelas terlihat.

Contohnya seperti di bawah ini, Sorotkan cursor
Anda tepat di atas gambar-gambar berikut :

Contoh 1 (satu) :

Syamsudinnamaku mengucapkan selamat mencoba tutorial ini semoga Anda menyukai tutorial lainnya yang ada di blog ini dan jangan lupa untuk follow.

Contoh 2 (dua) :

Bila Anda tertarik ini membuat efek ini,
berikut adalah langkah yang harus Anda ikuti :

1.   Rancangan -> Tambah Gadget
      Pilih HTML/JavaScript.

2.   Masukkan ke dalam kontennya
      kode yang berikut ini lalu simpan.

Kode untuk contoh 1 (satu) :

<div class="syamsudinoke gradualfader" style="background:#DAFF8C">
<a href="URL nama blog Anda">Kalimat Anda letakkan di sini<img src="URL gambar Anda letakkan di sini" align="left" />
</div>

Kode untuk contoh 2 (dua) :

<img src="URL gambar Anda letakkan di sini" class="gradualfader" style="float: left" />

KETERANGAN :

Masukkan URL nama blog Anda dan URL gambar

yang Anda ingin tampilkan.

Ganti juga kalimat keterangan gambarnya

dan sesuaikan dengan gambar Anda tersebut.

3.   Kemudian masuk ke Edit HTML

4.   Carilah tag </head>

5.   Copy kode berikut dan letakkan
      di atas tag </head> ini :

<style type="text/css">

.syamsudinoke{
width: 250px
}

.syamsudinoke{
width: 200px;

float: left;
margin-right: 10px;
border: 1px solid black;
background-color: #FEE88D;
padding: 3px;
display: block;
}

</style>

<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex11/gradualfader.js">

/***********************************************
* Gradual Element Fader- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* User http://www.syamsudinnamaku.blogspot.com
* This notice must stay intact for legal use
***********************************************/

</script>

KETERANGAN :

Sesuaikan ukuran lebar (width)

dan warna backgroundnya

dengan keinginan Anda.

4.   Lalu cari lagi tag </body>

5.   Copy kode berikut dan letakkan
      di atas atau sebelum tag </body> ini.
      Pratinjau lalu simpan template Anda.

<script type="text/javascript">
gradualFader.init() //activate gradual fader
</script>

Selamat mencoba, good luck!