Bootstrap ile minik bir akordeon tasarımı

Websitenizin herhangi bir yerine ekleyebileceğiniz küçük bir galery örneği. Emaj tarafından Bootstrap kütüphanesi kullanılarak hazırlanmış bu minik galeri örneği o kadra küçük ki websitenizin sidebar bölümüne dahi ekleyebilirsiniz. Akordiyon bir görünümde olan bu mini galeri örneğinde mouse ile reismlerin üzerne geldiğinizde sol tarafa doğru resimler kayıyor. bu işlem sırasında resimlerin açıklamalarıda üst üste geçerken bir önceki resmin açıklaması kayboluyor ve görüntülediğiniz resmin açıklaması beliriyor.

Download

Demo

Kullanım

Head etiketleriarasına eklemeniz gereken bölümler.

Bootstrap js ve css adresleri :

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" />

Css :

#main {
 background-color: #222f33;
 height: 100%;
 width: 100%;
 position: absolute;
}
#main h1 {
 color: #FFF;
 font-weight: 100;
 letter-spacing: 3px;
 padding: 20px 0;
}
#main #gallery {
 overflow: hidden;
 height: 280px;
 background-color: #000;
 width: 400px;
 margin: auto;
 margin-top: 30px;
 -webkit-box-shadow: 0 2px 3px #12181b;
 -moz-box-shadow: 0 2px 3px #12181b;
 box-shadow: 0 2px 3px #12181b;
}
#main #wrapper {
 position: relative;
 width: 1000px;
 height: 250px;
}
#main #wrapper li {
 float: left;
 width: 50px;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 cursor: pointer;
}
#main #wrapper li:last-child {
 width: 250px;
}
#main #wrapper li p {
 position: absolute;
 top: 255px;
 left: 40px;
 font-size: 16px;
 color: #FFF;
 font-weight: 100;
 opacity: 0;
 -webkit-transition: all 1s;
 -moz-transition: all 1s;
 -o-transition: all 1s;
 transition: all 1s;
}
#main #wrapper li:hover {
 width: 250px;
}
#main #wrapper li:hover p {
 opacity: 1;
 left: 10px;
}
#main #wrapper li:first-child {
 width: 250px;
}
#main #wrapper li:first-child p {
 opacity: 1;
 left: 10px;
}
#main #wrapper:hover li:first-child {
 width: 50px;
}
#main #wrapper:hover li:first-child p {
 opacity: 0;
 left: 40px;
}
#main #wrapper:hover li:first-child:hover {
 width: 250px;
}
#main #wrapper:hover li:first-child:hover p {
 opacity: 1;
 left: 10px;
}

Body etiketleri arasına eklemeniz gereken bölüm.

Html :

<div id="main">
 <div id="gallery">
 <ul id="wrapper" class="list-unstyled">
 <li>
 <img src="https://lorempixel.com/250/250/nature" />
 <p>Photo 1 : nature</p>
 </li>
 <li>
 <img src="https://lorempixel.com/250/250/animals" />
 <p>Photo 2 : animals</p>
 </li>
 <li>
 <img src="https://lorempixel.com/250/250/fashion" />
 <p>Photo 3 : fashion</p>
 </li>
 <li>
 <img src="https://lorempixel.com/250/250" />
 <p>Photo 4 : suprise :)</p>
 </li>
 </ul>
 </div>
</div>