Blogger Stack Efekti Genişleyen Resim Slayt

Gadget olarak kullanabilir veya yazı içerinde kullanabilirsiniz.

Not : Aynı yazı içerisinden birden fazla kullanımında çalışmayabilir.

<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDCU6qFPTuqq9CHDtBqhn-zxnHaX-pT0pVdxr-QCt0iRP9bmKQZUCeG2Op8i_OZEcMeUG7Wu5gI-nWdHQf7NhE5Upyd18KAWedd9Ej4qaTuezQrvt9epyPPOk6l4vYjbB7C3nLdxTf4oc/s1600/btrix_image1.jpg" alt />

  </a>

  

  <a href="#">

    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFEz3o39QlCzxEIck3bv1bty8xLmZwIjL_s1TUgeoLu-8t3UlkP5zjAYo6uLFYOsBwOKpyc2nTQ4SJA7ntj-3P8YRQdUn6hP4gbCnlTYODRmcmqyL5XLqu_qKHknBGV1r6SdfjcdLu7KY/s1600/btrix_image2.jpg" alt />

  </a>

  

  <a href="#">

    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJpzQarQFBB295xv1uVCvWczBUpMznCm_TlCmDUsj1B7HW4-YDscHXt2Q7rHgbat8XhAHMVIygwId1Iz-jiMkofU5wTLOrBgddsxHSxF4vHoRLOr1WrlwTYLYC-ij4Bp6lJ96ieYkg714/s1600/btrix_image3.jpg" alt />

  </a>

  

</div>

Blogumuza Abone Olun
Yeni Yazılar E-posta Adresinize Gelsin

Not: Gelen Maili Aktif  Etmeyi Unutmayınız!