MARI BERKARYA

Membuat gambar dengan CSS efek slide Hover

taruh kode ini diatas kode </head>

<script type='text/javascript'>
$(document).ready(function () {
     $('div.jimgMenu 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>





kemudian taruh CSS ini diatas ]]></b:skin>

.jimgMenu {
  position:relative;
  width:630px;
  height:200px;
  overflow:hidden;
  margin:10px;
}

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

.jimgMenu ul li {
  float:left;
}

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

.jimgMenu ul li.satu a  {background:url(http://3.bp.blogspot.com/-tV_WbAALyr8/ThKqb8arAiI/AAAAAAAAAXE/pT9KuebBecY/s1600/landscapes.jpg) repeat scroll 0%;}
.jimgMenu ul li.dua a   {background:url(http://3.bp.blogspot.com/--Dw4kWyM3yo/ThKqfxFZvtI/AAAAAAAAAXM/1L5ODPu0OcU/s1600/people.jpg) repeat scroll 0%;}
.jimgMenu ul li.tiga a  {background:url(http://4.bp.blogspot.com/-Uib-i2TNAsc/ThKqd6uDB6I/AAAAAAAAAXI/p89exio6t8E/s1600/nature.jpg) repeat scroll 0%;}
.jimgMenu ul li.empat a {background: url(http://4.bp.blogspot.com/-53TyMk779WE/ThKqY4c6BkI/AAAAAAAAAXA/rPFPPg0J8lc/s1600/abstract.jpg) repeat scroll 0%;}
.jimgMenu ul li.lima a  {background: url(http://4.bp.blogspot.com/-m0l4jFx9_TM/ThKqhmjUqmI/AAAAAAAAAXQ/wAPNi03KSn0/s1600/urban.jpg) repeat scroll 0%;min-width:310px;}


Penerapan untuk memanggil efeknya, dengan kode berikut

<div class='jimgMenu'>
     <ul>
          <li class='satu'><a href='#'>Landscapes</a></li>
          <li class='dua'><a href='#'>People</a></li>
          <li class='tiga'><a href='#'>Nature</a></li>
          <li class='empat'><a href='#'>Abstract</a></li>
          <li class='lima'><a href='#'>Urban</a></li>
     </ul>
</div>




hasilnya

Slide Panel