mintik

Herhangi bir JavaScript dosyası olmadan sadece  Css kullanılarak hazırlanmış bir akordiyon galeri örneği. Akordiyon galeri örneğinde en sağda bulunan resim daima açık bulunuyor. Mouse ile resimlerin üzerinde gezdiğinizde resmin başlığı yavaşça dönerek  düzgün konuma yerleşiyor ve resmin çerçeveside  600px kadar  açılıp tam ekran görünüyor. Websitelerinizin manşet  alanlarında yada sitenin orta kısmına eklerseniz  sitenize  farklı bir görüntü kazandıracaktır bu akordiyon galeri örneği. Css3 transitions, transforms ve rotate  kullanılarak böyle  bir akordiyon galeri örneği  ortaya çıkarılmış.

 

Kullanım

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

Css :

body {
 font-family: arial;
}
h2{
 color: #999;
}
.outer{
 width: 740px;
 margin: 0 auto;
}
#menu{
 margin: 0;padding: 0;
}
#menu li,
#menu:hover li:last-child {
 float: left;
 list-style: none;margin: 0;
 height: 220px;
 width: 30px; 
 overflow: hidden;
 position: relative;
}
#menu img{
 position: absolute;
 top: 3px; left: 3px;
}
#menu a,
#menu:hover li:last-child a{
 cursor: pointer;
 color: #eee;
 text-shadow: 4px 4px 4px #000;
 text-decoration:none;
 position: absolute;
 z-index: 2;
 bottom: 10px; left: 10px;
 -webkit-transform: rotate(-90deg);
 -o-transform: rotate(-90deg);
 -moz-transform: rotate(-90deg); 
}
#menu li:hover,
#menu li:last-child,
#menu:hover li:last-child:hover{
 width: 600px;
}
#menu li:hover a,
#menu li:last-child a,
#menu:hover li:last-child:hover a{
 -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -o-transform: rotate(0deg);
}
#menu li a,
#menu li {
 -webkit-transform-origin: 10%;
 -o-transform-origin: 10%;
 -moz-transform-origin: 10%;
 -webkit-transition: all 0.3s ease-in;
 -moz-transition: all 0.3s ease-in;
 -o-transition: all 0.3s ease-in;
}

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

Html :

<div class="outer">
 <ul id="menu">
 <li>
 <a href="https://www.mintik.com/?p=14350">Sports1</a>
 <img width="660" src="https://lorempixel.com/660/220/sports/1" />
 </li>
 <li>
 <a href="https://www.mintik.com/?p=14350">Sports2</a>
 <img width="660" src="https://lorempixel.com/660/220/sports/2" />
 </li>
 <li>
 <a href="https://www.mintik.com/?p=14350">Sports3</a>
 <img width="660" src="https://lorempixel.com/660/220/sports/3" />
 </li>
 <li>
 <a href="https://www.mintik.com/?p=14350">Sports4</a>
 <img width="660" src="https://lorempixel.com/660/220/sports/4" />
 </li>
 <li>
 <a href="https://www.mintik.com/?p=14350">Sports5</a>
 <img width="660" src="https://lorempixel.com/660/220/sports/5" />
 </li> 
 </ul>
 <div style="clear:both;"></div>
</div>