Blogger Stack Efekti Genişleyen Resim Slayt

HTML

<style>

#btrix_imgstack{

  width:300px;margin:0 auto;margin-top:2%;

}



#btrix_imgstack a{

  width:288px;

  height:200px;

  position:absolute;

  display:block;

  border:6px solid #f0f0f0;

  border-radius:2px;

  box-shadow:0 0 10px rgba(0,0,0,.3);

  transition:margin .5s;

  -webkit-transition:margin .5s;

}



#btrix_imgstack img{

  width:288px;

  max-height:100%;

}



#btrix_imgstack a:first-of-type{

  margin-top:-5px;

  margin-left:-20px;

  transform:rotate(-3deg);

  -webkit-transform:rotate(-3deg);

}



#btrix_imgstack a:nth-of-type(2){

  margin-top:-5px;

  margin-left:-10px;

  z-index:-1;}



#btrix_imgstack a:last-of-type{

  transform:rotate(3deg);

  -webkit-transform:rotate(3deg);

  z-index:-2;}



#btrix_imgstack:hover a:first-of-type{

  margin-left:-310px;

  margin-top:5px;}



#btrix_imgstack:hover a:nth-of-type(2){

  margin-top:-5px;}



#btrix_imgstack:hover a:last-of-type{

  margin-left:290px;

  margin-top:5px;}



#btrix_imgstack a:first-of-type:hover,#btrix_imgstack a:last-of-type:hover{margin-top:-5px;}

#btrix_imgstack a:nth-of-type(2):hover{margin-top:-10px;}

</style>

<div id="btrix_imgstack">

  

  <a href="#">

    <img src="http://1.bp.blogspot.com/-QGXmU_vZcLw/UodXeQiAQZI/AAAAAAAAISM/g7bIszohkSw/s1600/btrix_image1.jpg" alt />

  </a>

  

  <a href="#">

    <img src="http://2.bp.blogspot.com/-fiipDQF9DQ8/UodXeTIb8vI/AAAAAAAAISI/n2G_uw2NKvA/s1600/btrix_image2.jpg" alt />

  </a>

  

  <a href="#">

    <img src="http://2.bp.blogspot.com/-lf2EzJ_UHUA/UodXah-Z74I/AAAAAAAAISA/jjcN70BWR7I/s1600/btrix_image3.jpg" alt />

  </a>

  

</div>