Wednesday, October 16, 2013

Add Expanding Photo Stack Effect for Blogger





This is 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. It's used just CSS3 for this animation effect. Hope you can understand it .If you have any problem regarding to this tutorial let me know. Use below button for demo.


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 mix--er.blogspot.com
<style>
#trix_imgstack{
  width:300px;margin:0 auto;margin-top:2%;
}
#trix_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;
}
#trix_imgstack img{
  width:288px;
  max-height:100%;
}
#trix_imgstack a:first-of-type{
  margin-top:-5px;
  margin-left:-20px;
  transform:rotate(-3deg);
  -webkit-transform:rotate(-3deg);
}
#trix_imgstack a:nth-of-type(2){
  margin-top:-5px;
  margin-left:-10px;
  z-index:-1;}
#trix_imgstack a:last-of-type{
  transform:rotate(3deg);
  -webkit-transform:rotate(3deg);
  z-index:-2;}
#trix_imgstack:hover a:first-of-type{
  margin-left:-310px;
  margin-top:5px;}
#trix_imgstack:hover a:nth-of-type(2){
  margin-top:-5px;}

#trix_imgstack:hover a:last-of-type{
  margin-left:290px;
  margin-top:5px;}

#trix_imgstack a:first-of-type:hover,#trix_imgstack a:last-of-type:hover{margin-top:-5px;}
#trix_imgstack a:nth-of-type(2):hover{margin-top:-10px;}
</style>
<div id="trix_imgstack">
  <a href="#">
    <img src="http://1.bp.blogspot.com/-QGXmU_vZcLw/UodXeQiAQZI/AAAAAAAAISM/g7bIszohkSw/s1600/btrix_image1.jpg" alt />
  </a>
  <a href="#">
    <img src="http://2.bp.blogspot.com/-fiipDQF9DQ8/UodXeTIb8vI/AAAAAAAAISI/n2G_uw2NKvA/s1600/btrix_image2.jpg" alt />
  </a>
  <a href="#">
    <img src="http://2.bp.blogspot.com/-lf2EzJ_UHUA/UodXah-Z74I/AAAAAAAAISA/jjcN70BWR7I/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.