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>