Cara membuat Slider Accordian Style dengan CSS3

HaiSob apa kabar? Baiklah sobat pada kesempatan ini haisob.com akan membagikan cara membuat image slider dengan CSS3 di Blogger. Jadi tidak perlu menggunakan / menambahkan script yang biasanya memberatkan loading blog tapi menggunakan CSS saja.

Sebenarnya slider seperti ini sudah pernah dibagikan di Membuat Image Slide Effect Accoridion CSS3 di Blog tapi ini sedikit berbeda karena ada beberapa perubahan didalamnya. Untuk slider otomatis, nanti kami bagikan dilain waktu, atau cek saja slider otomatis yang sudah pernah dibagikan seperti resposive recent post dan slider otomatis v1.

CSS3 Slider Accordian Style


Cara Membuat CSS3 Slider Accordian Style di Blog
CSS3 Slider Accordian Style

HTML + CSS

<div class="accordian">
  <ul>
    <li>
      <div class="image_title">
        <a href="http://www.haisob.com/" target="_blank">KungFu Panda</a>
      </div>
      <a href="http://www.haisob.com/" target="_blank">
        <img src="http://3.bp.blogspot.com/-XK6s-yOHyjQ/VVJGpYJ5wJI/AAAAAAAAEuk/DBUGF9uzTh4/s1600/seocips1.jpg" />
      </a>
    </li>
    <li>
      <div class="image_title">
        <a href="http://www.haisob.com/" target="_blank">Toy Story 2</a>
      </div>
      <a href="http://www.haisob.com/" target="_blank">
        <img src="http://4.bp.blogspot.com/-s3jZBAeeYGU/VVJGp0uqRyI/AAAAAAAAEuo/2R4aur9Cq-g/s1600/seocips2.jpg" />
      </a>
    </li>
    <li>
      <div class="image_title">
        <a href="http://www.haisob.com/" target="_blank">Wall-E</a>
      </div>
      <a href="http://www.haisob.com/" target="_blank">
        <img src="http://3.bp.blogspot.com/-BISdMF0KVgo/VVJGylKjU7I/AAAAAAAAEu4/NYGW197P1f0/s1600/seocips3.jpg" />
      </a>
    </li>
    <li>
      <div class="image_title">
        <a href="http://www.haisob.com/" target="_blank">Up</a>
      </div>
      <a href="#">
        <img src="http://1.bp.blogspot.com/-qB5qUatCkyU/VVJG1QZnd8I/AAAAAAAAEu8/ah_oyISs92Y/s1600/seocips4.jpg" />
      </a>
    </li>
    <li>
      <div class="image_title">
        <a href="http://www.haisob.com/" target="_blank">Cars 2</a>
      </div>
      <a href="http://www.haisob.com/" target="_blank">
        <img src="http://2.bp.blogspot.com/-b-cPjmfQJzs/VVJGvPtdPyI/AAAAAAAAEu0/yKrlBiNSqVg/s1600/seocips5.jpg" />
      </a>
    </li>
  </ul>
</div>
<style>
/*Now the styles*/
.accordian {
  width: 805px;
  height: 320px;
  overflow: hidden;
  /*Time for some styling*/

  margin: 20px auto;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
  -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}
/*A small hack to prevent flickering on some browsers*/
.accordian ul {
  width: 2000px;
  /*This will give ample space to the last item to move
 instead of falling down/flickering during hovers.*/
}
.accordian li {
  position: relative;
  display: block;
  width: 160px;
  float: left;
  border-left: 1px solid #888;
  box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
  /*Transitions to give animation effect*/

  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  /*If you hover on the images now you should be able to
 see the basic accordian*/
}
/*Reduce with of un-hovered elements*/
.accordian ul:hover li {
  width: 40px;
}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
.accordian ul li:hover {
  width: 640px;
}
.accordian li img {
  display: block;
}
/*Image title styles*/
.image_title {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  bottom: 0;
  width: 640px;
}
.image_title a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 20px;
  font-size: 16px;
}
</style>

Width of image = 640px
Total images = 5
So width of hovered image = 640px
Width of un-hovered image = 40px - you can set this to anything
So total container width = 640 + 40*4 = 800px;
Default width = 800/5 = 160px;




Kamu dapat mengganti url link haisob dengan link milikmu dan mengganti gambarnya dengan gambarmu.

Sekian dan selamat mencoba.