Membuat Transisi Transparan pada Gambar / Tombol

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}

Anda baru saja membaca artikel yang berkategori Tips dan Trik / Tutorial dengan judul Membuat Transisi Transparan pada Gambar / Tombol. Anda bisa bookmark halaman ini dengan URL http://catatan-lutfi.blogspot.com/2012/07/membuat-transisi-transparan-pada-gambar.html. Terima kasih!

Ditulis oleh: Lutfi rahman - Selasa, 17 Juli 2012