Pure CSS3 Image Stack Effect for Blogger

In this tutorial I show you how to create a Pure CSS3 Image Stack Effect for Blogger/blogspot Published blogs with out using a pice of Image or Javascript.

Images plays great role for a blogger, with using images you can speak your mind or you can tell what is your article is about to your readers.

By now, hopefully you’re familiar with the use of the :before and :after pseudo-elements in order to do some interesting effects with CSS.

DEMO

The CSS

Add below CSS codes just above ]]></b:skin> in your Blogger template

.stack { position: relative; z-index: 10; }
/* Image styles */
.stack img { max-width: 100%; height: auto; vertical-align: bottom; border: 10px solid #fff; border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
/* Stacks creted by the use of generated content */
.stack:before, .stack:after { content: ""; border-radius: 3px; width: 100%; height: 100%; position: absolute; border: 10px solid #fff; left: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    -webkit-transition: 0.3s all ease-out;
    -moz-transition: 0.3s all ease-out;
    transition: 0.3s all ease-out;
}
.stack:before { top: 4px; z-index: -10; } /* 1st element in stack (behind image) */
.stack:after { top: 8px; z-index: -20; } /* 2nd element in stack (behind image) */
.stack:before {
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    transform: rotate(4deg);
}
.stack:after {
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
    transform: rotate(-4deg);
}

We have added the Main CSS codes, now if you want hover effect also add below code just above ]]></b:skin>

.stack:hover:before, .stack:hover:after {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
}

How to add this Effect in an Image

In your Blogger Post editor go to HTML mode and add class="stack" just like below

<a class="stack" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEOCYjg79l_m051mRD2uC8QJ1Yq9E_kg85vGqyTn2XCEqaKVBcdWcKa6I7QkU_HgUDqABgGYtECvZ2bCorHtSLlGXtey2eg9foD92agXEIefTadBMOoZOFQSPLbYliWvhDzFbgqUC_D4ZH/s320/Abu+Shaleh+logo.png" imageanchor="1"><img alt="www.abushaleh.net" border="0" height="134" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEOCYjg79l_m051mRD2uC8QJ1Yq9E_kg85vGqyTn2XCEqaKVBcdWcKa6I7QkU_HgUDqABgGYtECvZ2bCorHtSLlGXtey2eg9foD92agXEIefTadBMOoZOFQSPLbYliWvhDzFbgqUC_D4ZH/s200/Abu+Shaleh+logo.png" title="www.abushaleh.net" width="200" /></a>

Done! Preview your template and share this Tutorial. Thanks :)