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/AVvXsEhsdflanMZ9lBHsaIal4oNWiGrbEn4ujSVAYeJGFj3H2vHR7mGztQ0VDPCS0HRzbUwu5DP-LKuurw8mjPmRaqdEiwRV9g1GD8IPq-X_cLP9wciJjDHPHNIeMO1tqu7X6JOgGSaT49oRF4s/s1600/btrix_image1.jpg" alt />

  </a>

  

  <a href="#">

    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYqg8AoeFJyy01XZlKtihIX0121N0OdznaiQvetbzU7bLorWicmnTJNMEriopG7kieZfeQiJ48pY1MwLg02z1TIaNa1YR3fOQO8sniNc0XaEuQL6Gkb56Hl8lVvio-4PYa2ES-AMkFA0k/s1600/btrix_image2.jpg" alt />

  </a>

  

  <a href="#">

    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYefbWtCfznYMEmt4z9dKlUo8NP-VgBoPhnvJUJ0P_o_GUkJD7t0R-TRve_TUa_uFCMMwoYDcoX1cIeQyVMIgAcMaLOt1VMdKKC7dC-kfDhyphenhyphenZAU9tcw_A5AHXqObn7cQBon8zMGcyLits/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!