Few days back I posted a tutorial on Dynamic Stack Effect For Blogger. The tutorial I am posting now is on Photo Stack Effect, this effect uses only CSS3. I saw this effect on Google+ photos tab. The only disadvantage of this effect is browser compatibility, except the browser compatibility every thing works fine. I am giving the demo right on this page at the end.
Adding Photo Stack Effect To Blogger
Here I am giving you the easiest way to add this to your blog. Just follow the instructions below-
1. Add a new "HTML/JAVASCRIPT" gadget to your blog.
2. Paste the below code in the editor-
<style>
/* the A tag */
.album {
position: relative;
z-index: 5;
width: 125px;
vertical-align: top;
display:block;
}
/* the images */
.album img {
position: absolute;
top: 0;
left: 0;
border: 5px solid #f3f3f3;
box-shadow: 1px 1px 2px #666;
-webkit-box-shadow: 1px 1px 2px #666;
-moz-box-shadow: 1px 1px 2px #666;
width:125px;
height:125px;
display:block;
}
/* first image: webkit */
@-webkit-keyframes image1 {
0% { -webkit-transform: rotate(0deg) translate(0, 0) scale(1.0); }
100% { -webkit-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1); }
}
/* first image: firefox */
@-moz-keyframes image1 {
0% { -moz-transform: rotate(0deg) translate(0, 0) scale(1.0); }
100% { -moz-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1); }
}
/* first image: opera */
@-o-keyframes image1 {
0% { -o-transform: rotate(0deg) translate(0, 0) scale(1.0); }
100% { -o-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1); }
}
/* second image: webkit */
@-webkit-keyframes image2 {
0% { -webkit-transform: rotate(0deg) translate(0, 0) scale(1.0); }
100% { -webkit-transform: rotate(0deg) translate(0, -3px) scale(1.1); }
}
/* second image: firefox */
@-moz-keyframes image2 {
0% { -moz-transform: rotate(0deg) translate(0, 0) scale(1.0); }
100% { -moz-transform: rotate(0deg) translate(0, -3px) scale(1.1); }
}
/* second image: opera */
@-o-keyframes image2 {
0% { -o-transform: rotate(0deg) translate(0, 0) scale(1.0); }
100% { -o-transform: rotate(0deg) translate(0, -3px) scale(1.1); }
}
/* third image: webkit */
@-webkit-keyframes image3 {
0% { -webkit-transform: rotate(0deg) translate(0, 0) scale(1.0); }
100% { -webkit-transform: rotate(6deg) translate(100px, -3px) scale(1.1); }
}
/* third image: firefox */
@-moz-keyframes image3 {
0% { -moz-transform: rotate(0deg) translate(0, 0) scale(1.0); }
100% { -moz-transform: rotate(6deg) translate(100px, -3px) scale(1.1); }
}
/* third image: opera */
@-o-keyframes image3 {
0% { -o-transform: rotate(0deg) translate(0, 0) scale(1.0); }
100% { -o-transform: rotate(6deg) translate(100px, -3px) scale(1.1); }
}
/* first image animation properties */
.album:hover .photo1, .album:focus .photo1 {
/* webkit animation properties */
-webkit-animation-name: image1;
-webkit-animation-duration: .2s;
-webkit-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
/* firefox animation properties */
-moz-animation-name: image1;
-moz-animation-duration: .2s;
-moz-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
/* opera animation properties */
-o-animation-name: image1;
-o-animation-duration: .2s;
-o-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
/* microsoft animation properties */
-ms-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
}
/* second image animation properties */
.album:hover .photo2, .album:focus .photo2 {
/* webkit animation properties */
-webkit-animation-name: image2;
-webkit-animation-duration: .2s;
-webkit-transform: rotate(0deg) translate(0, -3px) scale(1.1);
/* firefox animation properties */
-moz-animation-name: image2;
-moz-animation-duration: .2s;
-moz-transform: rotate(0deg) translate(0, -3px) scale(1.1);
/* opera animation properties */
-o-animation-name: image2;
-o-animation-duration: .2s;
-o-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
/* microsoft animation properties */
-ms-transform: rotate(0deg) translate(0, -3px) scale(1.1);
}
/* third image animation properties */
.album:hover .photo3, .album:focus .photo3 {
/* webkit animation properties */
-webkit-animation-name: image3;
-webkit-animation-duration: .2s;
-webkit-transform: rotate(6deg) translate(100px, -3px) scale(1.1);
/* firefox animation properties */
-moz-animation-name: image3;
-moz-animation-duration: .2s;
-moz-transform: rotate(6deg) translate(100px, -3px) scale(1.1);
/* opera animation properties */
-o-animation-name: image3;
-o-animation-duration: .2s;
-o-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
/* microsoft animation properties */
-ms-transform: rotate(6deg) translate(100px, -3px) scale(1.1);
}
</style>
<a class='album' href='#'>
<img class='photo1' src='IMAGE URL'/>
<img class='photo2' src='IMAGE URL'/>
<img class='photo3' src='IMAGE URL'/>
</a>
Want more cool css tricks ? Then click here
0 comments:
Post a Comment