Aslında yazının başlığı saf Css3 akordiyon  örneği olacaktı ama üzülerek söylüyorum 124 bitlik bir resim yüzünden bu akordiyon örneği saf kelimesini haketmiyor.  Resim başlıklarının arkaplanında şeffaf  bir  bölüm oluşturmak istedim ama bunun sonucunda resim başlıklarıda ister istemez  şeffaf  bir hal alıyordu. Ya  çok fazla  satır ekleyecektim html kodlar  içine yada 124 bitlik bir  resim ekleyecektim. Bana göre resim eklemek  daha mantıklı geldi. Pekte  bir yer tuttuğu yok aslında. (Artık resim hiç yer tutmuyor çünkü yanlışlıkla 124 bitlik resmi sildim 🙂 Ama daha güzel bir  görünüm ortaya çıktı.)

İlk bakışta  bütün resimlerin %20’lik  bir bölümü görünüyor mouse  ile herhangi bir resmin üzerine geldiğinizde %20’lik oran %80’e çıkıyor.  Bazı akordiyon örneklerinde  resim başlıklarını yan  kullanabilmek için photoshop yada benzeri bir program yardımı  ile  resimlerin üzerine dikey  yazı  yazmak  zorunda  kaldığınız  durumlar  olurdu  bu yüzden  resimlerin  olduğu çerçeveye  css  rotate kullanarak  bu yüküde üstünüzden kaldırdım. İE hariç diğer  tarayıcılarda sorunsuz  bir şekilde  çalışıyor.  İllaki  İE üzerindede  çalışsın diyorsanız  buradan jQuery rotate eklentisini  inceleyerek  iE üzerinden  jQuery ile nasıl yapabileceğinizi  öğrenebilirsiniz. Yada İE tarayıcılarında  çalışan bir  rotate filtresini  buradan inceleyebilirsiniz.

Kullanım

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

Css : 

/*------------------------------------*\
	RESET
\*------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
	margin:0;
	padding:0;
}
table{
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img{ 
	border:0;
}
address,caption,cite,dfn,th,var{
	font-style:normal;
	font-weight:normal;
}
caption,th{
	text-align:left;
}
h1,h2,h3,h4,h5,h6{
	font-size:100%;
	font-weight:normal;
}
q:before,q:after{
	content:'';
}
abbr,acronym{
	border:0;
}





----------------------------------------

body{
}
h1{
	font-weight:bold;
	font-size:2em;
	text-align:center;
}


.genel-cerceve {
width:95%;
padding:15px 15px;

}



/*------------------------------------*\
	Akordiyon
\*------------------------------------*/
.akordiyon{
	width:940px;
	overflow:hidden;
	list-style:none;
	margin-bottom:10px;
	margin:0 50px;
	text-shadow:1px 1px 1px rgba(0,0,0,0.25);


}
.akordiyon li{
	float:left;
	width:20%;
	overflow:hidden;
	height:250px;
	-moz-transition:width 0.2s ease-out;
	-webkit-transition:width 0.2s ease-out;
	-o-transition:width 0.2s ease-out;
	transition:width 0.2s ease-out;
}
.akordiyon li:first-of-type{
	-moz-border-radius:10px 0 0 10px;
	-webkit-border-radius:10px 0 0 10px;
	-o-border-radius:10px 0 0 10px;
	border-radius:10px 0 0 10px;
}
.akordiyon li:last-of-type{
	-moz-border-radius:0 10px 10px 0;
	-webkit-border-radius:0 10px 10px 0;
	-o-border-radius:0 10px 10px 0;
	border-radius:0 10px 10px 0;
}
.akordiyon:hover li{
	width:5%;
}
.akordiyon li:hover{
	width:80%;

}
.slayt {
    width:940px;
    height:auto; 
 }
 
.slayt img{
     width:760px;
    height:300px; 
 }
 
.resim {
    position:relative;


}
.resim .baslik {
    position:absolute;
	background-image:url(img/bg.png);
	text-align:center;
	margin-top:-200px;
    left:-125px;
    width:300px;
	height:50px;
	-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: lr-tb;

	 -webkit-box-shadow: -14px 11px 30px rgba(50, 50, 50, 0.71);
    -moz-box-shadow:    -14px 11px 30px rgba(50, 50, 50, 0.71);
    box-shadow:         -14px 11px 30px rgba(50, 50, 50, 0.71);
}

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

Html :