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.

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>