Membuat Transisi Transparan pada Gambar / Tombol Lutfi rahman rwxr-xr-x 0 11.21

Filename	Membuat Transisi Transparan pada Gambar / Tombol
Permission	rw-r--r--
Author	Lutfi rahman
Date and Time	11.21
Label
Action

Banyak cara untuk menarik perhatian para pengunjung blog. Selain memberikan bumbu-bumbu(emangnya masak) widget pada sidebar blog, Kita juga dapat membuat efek pada gambar pada blog.

Efek yang akan kita buat sesuai dengan judul posting ini, "Membuat Transisi Transparant pada Gambar" " hah.. Maksudnya apa?? "


Maksudnya adalah untuk membuat gambar di blog agan menjadi transparan ketika di bayangi oleh kursor dan kembali seperti semula jika tidak dibayangi kursor atau sebaliknya. Masih belom ngerti juga maksudnya?? klo gitu langsung liat aja contohnya nih:

contoh 1

contoh 2


Udah ngerti-kan sekarang?? klo belom ngerti juga langsung aja praktekin. Nih kode-nya:

Kode contoh 1:

<img src="URL gambar" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

Kode contoh 2:

<img src="URL gambar" border="1" style="opacity:1;filter:alpha(opacity=100)" onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"/>

Pengunjung berkata: " ah.. Gw males masang satu-satu". Males masang satu-satu?? mau setiap gambar di blog kaya gtu?? gampang kok! bisa diatur. Ikuti step2 nya!

• Masuk ke Blogger
• Lalu klik Rancangan
• kemudian klik Edit HTML
• Cari kode " ]]> " tanpa tanda kutip. Biar cepet pake " CTRL+F "
• Klo udah ketemu, Copy Kode berikut di atas kode ]]>

Kode contoh 1:

.post img{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}<br /> .post img:hover{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}

Kode contoh 2:

.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}<br /> .post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}