Efek transparent pada gambar posting

Efek transparent atau samar-samar dapat diaplikasikan pada gambar posting. Ketika hover (mouse berada diatas dan mengenai objek gambar) maka efek transparent mulai terlihat.  Dan anda bisa mengetahui perubahan yang terjadi, secara perlahan namun pasti dalam posisi hover gambar menjadi transparent (samar-samar) dan jika mouse mininggalkan gambar tersebut, gambar akan kembali pada kondisi semula.

Selain menghasilkan efek normal ke transparent, juga bisa diciptakan efek transparent ke normal dengan merubah sedikit kode yang dipasang.

Dalam menciptakan efek transparent, disini kita memakai jquery sehingga gambar akan mengalami perubahan dari normal ke transparent secara perlahan-lahan, demikian pula sebaliknya.

Cara membuat gambar posting efek transparent :
1.    cari kode </head>
2.    pasang kode ini diatasnya

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>

catatan: kalau sudah ada di dalam template sobat tidak perlu memasangnya lagi

3. kemudian letakan script dibawah ini di bawah kode ]]></b:skin>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.efekanimasi&quot;).fadeTo(&quot;slow&quot;, 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(&quot;.efekanimasi&quot;).hover(function(){
$(this).fadeTo(&quot;slow&quot;, 0.6); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo(&quot;slow&quot;, 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>

4. jangan lupa save

Contoh pemasangan secara manual pada  gambar tertentu:

<img class="efekanimasi" src="url alamat gambar"/>

Bila sobat ingin membuat efek transparent pada semua gambar posting, caranya sbb:
1.    cari kode ]]></b:skin>
2.    pastekan kode ini dibawahnya

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.post img&quot;).fadeTo(&quot;slow&quot;, 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(&quot;.post img&quot;).hover(function(){
$(this).fadeTo(&quot;slow&quot;, 0.6); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo(&quot;slow&quot;, 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>

3.    terakhir save

Lihat hasilnya klik demo
DEMO

Trik diatas adalah cara membuat efek transparent pada gambar dengan perubahan dari normal ke transparent.

Sedangkan untuk perubahan dari transparent ke normal tinggal ditukar saja angkanya:
-    Angka 1.0 diganti 0.6
-    Angka 0.6 diganti 1.0

Mudah bukan? Selamat membuat efek transparent pada gambar.