Gallery Image Hover dengan Jquery

Beberapa efek gambar perlu ditambahkan untuk mempercantik tampilan. Efek ini akan memberi respon atraksi peralihan yang indah sebagai daya tarik tampilan gambar tersebut. Kali ini saya akan share cara memberi efek hover pada gambar dalam gallery. Bila cursor di arahkan pada salah satu gambar tersebut, maka gambar yang lain akan menimbulkan efek blur.Sekarang mari kita bahas cara membuat gallery image hover dengan jquery. Ikuti langkah berikut.
Masuk blogger
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode ]]></b:skin>

.clear { display: inline-block; }
.clear:after { display: block; visibility: hidden; clear: both; height: 0; content: "."; }
#portfolio-list li { float: left; margin: 0 10px; }
#portfolio-list li a, #portfolio-list li a:visited { display: block; border: 5px solid #4f8603; width: 210px; height: 140px; }
#portfolio-list li a:hover, #portfolio-list li a:active { border-color: #315301; }

Masukkan kode berikut di atas kode </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> /* bila kode ini sudah ada dalam template anda, maka kode ini tidak usah dipasang. Karena script tidak akan berjalan dengan adanya dua kode tersebut */

<script>
jQuery(document).ready(function() {
     jQuery("#portfolio-list").delegate("li", "mouseover mouseout", function(e) {
          if (e.type == 'mouseover') {
               jQuery("#portfolio-list li").not(this).dequeue().animate({opacity: "0.3"}, 300);
          } else {
               jQuery("#portfolio-list li").not(this).dequeue().animate({opacity: "1"}, 300);
          }
     });
});
</script>

Klik Simpan Template
Selanjutnya gunakan kode untuk memanggil kode gambar anda. Bila bingung...saat anda menulis artikel, masuk pada klik HTML yang berada pada sebelah kiri atas (di samping Compose) pada bar tools artikel. Lalu masukkan kode berikut.

<ul id="portfolio-list" class="clear">
     <li><a href="#" title="JUDUL GAMBAR"><img alt="KETERANGAN SINGKAT GAMBAR" src="ALAMAT GAMBAR" width="210" height="140" /></a></li>
     <li><a href="#" title="JUDUL GAMBAR"><img alt="KETERANGAN SINGKAT GAMBAR" src="ALAMAT GAMBAR" width="210" height="140" /></a></li>
     <li><a href="#" title="JUDUL GAMBAR"><img alt="KETERANGAN SINGKAT GAMBAR" src="ALAMAT GAMBAR" width="210" height="140" /></a></li>
     <li><a href="#" title="JUDUL GAMBAR"><img alt="KETERANGAN SINGKAT GAMBAR" src="ALAMAT GAMBAR" width="210" height="140" /></a></li>
</ul>

Silahkan ikuti petunjuk tulisan berwarna dengan cetak tebal. Contohnya seperti di bawah ini

<ul class="clear" id="portfolio-list">
<li><a href="3" title="dragon readmore"><img alt="dragon style" height="140" src="http://i1138.photobucket.com/albums/n524/blogonol/blogonol-dragon-readmore.png" width="210" /></a></li>
..........dan seterusnya................
</ul>

Demikian tutorial cara membuat gallery image hover dengan jquery. Bila masih bingung silahkan tanyakan melalui komentar. Selamat mencoba dan sukses selalu

"keep spirits and do the best"