How to Add Expanding Photo Stack Effect for Blogger?

Impressive expending stack effect may be quite useful for attracting the visitors’ attention and generally impressive. It is relatively easy to implement, and each and very modern browser supports this effect. You can add this widget to Blogger side bar by resizing several selected images. The simple CSS3 coding is used to create the highlighted animation effect.

Check the effect demo in the embedded frame by hovering with your pointer through the pictures.

The procedure

1. Go to Blogger Dashboard > Layout

2. Click Add Gadget and select 'HTML/Javascript'

3. Paste below code.

/* The CSS Code for the image starts here bloggertrix.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="#">

    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnDtUcn2a9AmhPv281I9OZoMWDb7apbMD6OOFZcsM_IfU81ZtdWlzD_P1rgwdh2sHP_zXntwc8OR4uv7odAbWnv8wV7vuAJDtiToLmp_djXGUrkPa2Mj5y4buTl-CWbcNrwJXK5lbQ4zo/s1600/btrix_image1.jpg" alt />

  </a>

 

  <a href="#">

    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Mw-nkGIj9JAs4ITCZj6kSM3kw9VTl73dPP4h4h_7RrniLhqFthnrtImvSke0ibmLYehY9Ymcb9Lbc5jh1TpnRhpNpWjUVy4U9rjAPz62hpyHzpXGLu9QxtkyS3uGO_1CVgqo8Xbcvpk/s1600/btrix_image2.jpg" alt />

  </a>

  <a href="#">

    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigDOyjtWYRlbWwOpuBv9Z6xejawAPbBFre-HWw34d9uNKwURrzY-Ppaugqz6r69IbE_mWFShIXALuUECTnRU3ckv0pv0AgziPzYSCm471a08_9_jQ74usuQcPxAIpXMZ13p8HQFUI5RS0/s1600/btrix_image3.jpg" alt />

  </a>

 

</div>

Replace # with your links.
Replace Red color Link with your Image link.

4. Now save your HTML/Javascript'.

You are done.

Source: http://www.bloggertrix.com/2013/11/add-expanding-photo-stack-effect-for.html