Efek According Pada Gambar Dengan Perintah Hover

Efek According Pada Gambar Dengan Perintah Hover - Gambar pada blog merupakan ringkasan keterangan saat kita sulit menerangkan caranya dengan tulisan, sehingga dengan menyisipkan gambar disetiap postingan blog sangat membantu pembaca untuk memahami atau melakukan praktek secara langsung tentang semua rincian perintah dari artikel tersebut. Itu sebabnya mereka yang berkunjung ke blog Anda, tanpa membaca keseluruhan tulisan artikel Anda sekalipun, mereka akan lebih memahami hanya dengan melihat gambar pada postingan.

Kesempatan kali ini, saya akan coba memberikan tutorial yang terbaik buat kawan-kawan semua pecinta SAHABAT BLOGGER 77 tentang pembahasan bagaimana Cara Membuat Efek According Pada Gambar Dengan Perintah Hover. Melanjutkan postingan sebelumnya tentang tutorial Membuat Efek Figure According Pada Gambar Perintah KLIK yang telah saya bahas dipertemuan sebelumnya, efek gambar kali ini saya akan ubah tampilannya dengan perintah hover menggunakan JavaScript dengan animasi scroll seperti ini




DEMO SHOW

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function () {
     $('div.jimgMenu-sb77 ul li a').hover(function() {
          if ($(this).is(':animated')) {
               $(this).addClass("active").stop().animate({width: "310px"}, {duration: 450, easing: "easeOutQuad", complete: "callback"});
          } else {
               $(this).addClass("active").stop().animate({width: "310px"}, {duration: 400, easing: "easeOutQuad", complete: "callback"});
          }
     }, function () {
          if ($(this).is(':animated')) {
               $(this).removeClass("active").stop().animate({width: "78px"}, {duration: 400, easing: "easeInOutQuad", complete: "callback"})
          } else {
               $(this).removeClass("active").stop(':animated').animate({width: "78px"}, {duration: 450, easing: "easeInOutQuad", complete: "callback"});
          }
     });
});
</script>

Perhatikan kode script yang saya beri warna MERAH, abaikan script tersebut jika pada template Anda sudah terdapat jQuery yang sama. Script diatas sudah saya susun berdasarkan perintah hover dengan animasi saat gambar active, dan saat gambar stop dengan angka value yang bisa Anda sesuaikan sendiri nantinya.

Agar tampilan gambar yang akan Anda beri efek dapat responsive, pada tahapan berikutnya kita perlu menyusun gambar dengan menggunakan perintah CSS seperti ini.

Baca juga - Kumpulan Ragam Efek Pada Gambar

//* according effect with hover style
css design: inputcode="link-sb77","sahabat blogger 77"
sumber: http://sahabatblogger77.blogspot.com/
author: devy indriyani
*//
.jimgMenu-sb77 {
  position:relative;width:600px;
  height:200px;overflow:hidden;}

.jimgMenu-sb77 ul {
  list-style:none;display:block;
  height:200px;width:1340px;}

.jimgMenu-sb77 ul li {float:left;}
.jimgMenu-sb77 ul li a {
  text-indent:-1000px;
  background:#080 none repeat scroll 0%;
  border-right:2px solid #ccc;
  cursor:pointer;display:block;
  overflow:hidden;width:78px;height:200px;}

.jimgMenu-sb77 ul li.satu a {background:url(URL-gambar1.jpg) repeat scroll 0%;}
.jimgMenu-sb77 ul li.dua a {background:url(URL-gambar2.jpg) repeat scroll 0%;}
.jimgMenu-sb77 ul li.tiga a {background:url(URL-gambar3.jpg) repeat scroll 0%;}
.jimgMenu-sb77 ul li.empat a {background: url(URL-gambar4.jpg) repeat scroll 0%;}
.jimgMenu-sb77 ul li.lima a {background: url(URL-gambar5.jpg) repeat scroll 0%;min-width:310px;}

CSS diatas sudah saya permudah dalam peng-editan. Sebagai contoh pada tutorial kali ini, saya menyisipkan 5 buah gambar, nah..!! jika Anda ingin menyisipkan lebih banyak gambar lagi, Anda tinggal melanjutkan pada kode (jimgMenu-sb77 ul li.lima a,jimgMenu-sb77 ul li.enam a) dan seterusnya. Saatnya menampilkan hasil kerja Anda di postingan blog dengan kode perintah HTML seperti berikut:

<div class="jimgMenu-sb77">
<ul>
<li class="satu">
<a href="http://sahabatblogger77.blogspot.com">Gambar-1</a></li>
<li class="dua">
<a href="http://sahabatblogger77.blogspot.com">Gambar-2</a></li>
<li class="tiga">
<a href="http://sahabatblogger77.blogspot.com">Gambar-3</a></li>
<li class="empat">
<a href="http://sahabatblogger77.blogspot.com">Gambar-4</a></li>
<li class="lima">
<a href="http://sahabatblogger77.blogspot.com">Gambar-5</a></li>
</ul>
</div>

Mereka yang bertanya sekalipun belum tentu akan memahami atas jawaban yang mereka dapatkan, lalu bagaimana dengan Anda yang tidak mau bertanya atau malu bertanya, jadi saya akan setia menunggu suara Anda pada kolom bertanya dibawah, hehehe...!!