How To Add Expanding Photo Stack Effect In Blogger

Today I am explain simple tutorial about How to add Add Expanding Photo Stack Effect for Blogger Images. Every modern browsers support with this effect. You can add this to blogger side bar by re-size images.Im just using CSS3 for this animation effect.Hope you can understand it.if you have any problem regarding to this tutorial let me know.

Click Here To View Demo

How to Add Add Expanding Photo Stack Effect for Blogger

☛ Go to Blogger Dashboard > Layout
☛ Click Add Gadget and select 'HTML/Javascript'
☛ Copy and paste below code.

✺✺✺ [ Note : To copy below code just move your mouse on code area. You will see
On right side. Click <> to copy code. ]

/* The CSS Code for the image starts here blogbeginnerguide.blogspot.com

<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="Post Url Here">

    <img src="Image Url Here" alt />

  </a>

 

 <a href="Post Url Here">

    <img src="Image Url Here" alt />

  </a>

 

  <a href="Post Url Here">

    <img src="Image Url Here" alt />

  </a>

 

</div>

☛ Replace Image Url Here & Post Url Here with your Post URL and Image URL.
☛ Now save your HTML/Javascript'.

You are done. If you have any problem related to this Expanding Photo Stack Effect for Blogger. Just leave a comment.I will help to you.