Cara Membuatnya :

• Tambah Gadget - Opsi HTML/Javascrpt
• Dan Copy Code Dibawah ini :

<style> * { margin: 0; padding: 0; } .accordian { width: 500px; height: 200px; overflow: hidden; margin: 100px 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); } .accordian ul { width: 2000px; } .accordian li { position: relative; display: block; width: 100px; 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); transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .accordian ul:hover li {width: 20px;} .accordian ul li:hover {width: 500px;} .accordian li img { display: block; } .image_title { background: rgba(0, 0, 0, 0.5); position: absolute; left: 0; bottom: 0; width: 5000px; } .image_title a { display: block; color: #fff; text-decoration: none; padding: 10px; font-size: 10px; } </style> <br />
<div class="accordian">
<ul>
<li> <div class="image_title">
<a href="http://www.blogger.com/blogger.g?blogID=4200986795934557246#">Bob Marley</a> </div>
<a href="http://www.blogger.com/blogger.g?blogID=4200986795934557246#"> <img src="http://25.media.tumblr.com/tumblr_lyzqejf1Dl1qdo2nto1_400.jpg" /> </a> </li>
<li> <div class="image_title">
<a href="http://www.blogger.com/blogger.g?blogID=4200986795934557246#">Bob Marley</a> </div>
<a href="http://www.blogger.com/blogger.g?blogID=4200986795934557246#"> <img src="http://vkontakte.dj/cat/image/24404/Bob%20Marley.jpg" /> </a> </li>
<li> <div class="image_title">
<a href="http://www.blogger.com/blogger.g?blogID=4200986795934557246#">Bob Marley</a> </div>
<a href="http://www.blogger.com/blogger.g?blogID=4200986795934557246#"> <img src="http://userserve-ak.last.fm/serve/_/7734455/Bob+Marley++smile.jpg" /> </a> </li>
<li> <div class="image_title">
<a href="http://www.blogger.com/blogger.g?blogID=4200986795934557246#">Bob Marley</a> </div>
<a href="http://www.blogger.com/blogger.g?blogID=4200986795934557246#"> <img height="400" src="http://cdn-dailyelle.ladmedia.fr/2012/10/Bob-Marley.jpg" width="321" /> </a> </li>
</ul>
</div>

Simpan dan Lihat Hasilnya : Semoga yang baca udah pada pinter dan tak perlu banyak mwmbingungkan diri sendiri :
Hanya saja karena saya juga masih dalam tahap pemula, jadi langsung ke praktek :
Sekian  cara Membuat Image Accordion Slider Horizontal dengan CSS3