Cara membuat efek transparan pada gambar

Cara lain untuk memberikan tampilan menarik pada web atau blog diantaranya memberi efek transparan pada gambar. Gambar dengan efek transparan tersebut bisa kita letakkan pada setiap posting artikel, agar pembaca lebih tertarik dengan  adanya gambar tersebut. Atau anda bisa taruh dimana saja sesuai selera anda.
Cara kerjannya adalah ketika pointer mouse kita gerakkan diatas gambar, secara otomatais gambar akan memberi efek transparan. Dan ketika pointer mouse kita gerakkan menjauh dari gambar, secara otomatais akan kembali seperti semula atau tidak transparan. Hal ini karena menggunakan atribut onmouseover dan atribut onmouseout.

Cara buatnya sangat mudah, kita tinggal menyisipkan beberapa kode pada gambar. Silahkan anda perhatikan kode - kode berikut :

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeuQr6NSEh9fAYmz6FpK3LpX24SMGqN1vfhY5l7iGlKoL_M5kZZhQ73s1z7-DaIY2F428Zq5cXNJwTjYGlsjZG_RRkgRoPolj9opQO9SRDiaxqSVAvMAuuD9VAq97xdgAOvoq-s2geND41/s200/Efek+transparan.jpg" width="200" height="200"
onmouseout="this.style.opacity=1; this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.4; this.filters.alpha.opacity=40"/>

Catatan :
- Ganti ULR gambar dengan milik anda.

- Semakin kecil nilai opacity, maka efek transparan akan semakin buram.
- Kode sintaks yang berwarna merah untuk browser Firefox.
- Kode sintaks yang berwarna Biru untuk browser IE.
- Jadi lebih baik dua - duanya kita pasang.

Kemudian bila anda ingin memberi Link pada gambar tersebut, kita tinggal menambah HTML Link sehingga menjadi seperti kode berikut :

<a href="http://www.carabuatwebgratis.com/2011/05/cara-membuat-efek-transparan-pada.html" target="_blank">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeuQr6NSEh9fAYmz6FpK3LpX24SMGqN1vfhY5l7iGlKoL_M5kZZhQ73s1z7-DaIY2F428Zq5cXNJwTjYGlsjZG_RRkgRoPolj9opQO9SRDiaxqSVAvMAuuD9VAq97xdgAOvoq-s2geND41/s200/Efek+transparan.jpg" width="200" height="200"
onmouseout="this.style.opacity=1; this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.4; this.filters.alpha.opacity=40"/></a>

Berikut contoh gambar hasil dari kode diatas :

Nah...., mudahkan....?
Ok...., Selamat mencoba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Judul: Cara membuat efek transparan pada gambar; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts

• Cara menampilkan widget pada halaman utama (home-page)Tutorial-Onlineku.Berikut adalah tutorial tentang bagai mana cara menampilkan widget pada halaman utama saja sebagai contoh widget iklan anda yang berada di sidebar ... readmore
• Cara membuat efek membesar pada gambarMemberikan efek membesar pada gambar adalah salah satu cara menjadikan web atau blog tampil menarik. Biasanya digunakan pada web atau blog yang banyak menampilkan g ... readmore
• Cara membuat gambar melayangCara membuat gambar melayang menggunakan properti float, properti float sangat sering digunakan untuk gambar. Dengan Properti float, sebuah gambar bisa dibuat melay ... readmore
• CSS Border-RadiusFungsi Properti css border - radius memudahkan kita merubah sudut pada sebuah box atau kotak menjadi tumpul atau melengkung. Bahkan dengan properti css border - rad ... readmore
• Thread Comments Stylish Dark Edition dengan CSSPada kesempatan kali ini saya akan membahas tentang modifikasi thread comment. "Thread Comment Stylish Dark Edition dengan CSS". thread comment yang biasa dan sudah ... readmore