How Add Expanding Photo Stack Effect for Blogger

PUT YOUR PARSED ADSENSE CODE HERE

We Discussing Today, how Add Expanding Photo Stack Effect Slideshow in Blogger. This Photo Efect is Very unique And Stylish Look And Design Using Css3 .This Effect Work Every Blogger and Awesome Cool Design .This Widget Is Awesome New Customization With Expanding Style. If You Have Any Problem During Installation This Widget Comments Me.

How Add Expanding Photo Stack Effect for Blogger

How to Add Add Expanding Photo Stack Effect for Blogger

1. Go to Blogger Dashboard >> Layout
2. Click On Add Gadget and select 'HTML/Javascript'
3. Paste below code.

/* The CSS Code for the image starts here seobloggertricks.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/AVvXsEgF-E43dkkjb1m6BqV1tjvRCDxiBXfcpdOTgpQQ543RJnsNAnQDfjD1vXnn7z4gKw-jLnjlQZjgR64qdDexTuMfT7wQLFH8QoijpY4to-9_ty323tkc2caNCAQOGG3iy9WAei0AO3DTL4c/s1600/btrix_image1.jpg" alt />
  </a>

  <a href="#">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhX-YPtCGQ-2qz-hOT78w8MQIjXEwaPzYBgaqOFcEMCoSSfD4hFizJLh4kCXeIQOJch1TvXDRRqD4SNT46056lsVdY6pWhTve2nn8aKadJsKyjO4SaAjm41SOoMVPrM5OXAg52GKi9aAU/s1600/btrix_image2.jpg" alt />
  </a>

  <a href="#">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLoyS2lVCilSdea-szQbe7I9APZIZIwPIVOuJzztXelUaC8zbx-S5p2QRh4NUtdJTAhgw2GQQdQiQAnmr1nFV3UvF4HYg1DQe5ScVFkun3ZnQ6J2_TV5XZBLogV4wEeip86OCU0LST1ZY/s1600/btrix_image3.jpg" alt />
  </a>

</div>

• Replace # with your links. 
• Replace Bold Black color Link with your Image link.

Do you Like this story..?

Get Free Email Updates Daily!	Follow us!