How to make Stack Images With Full CSS on Free Premium HTML

Hi Guys With Our First Tutorial on Free TUTS.
Todays Tutorial is a Stack images with cool effect just with pure css3;

First Lets Begin with the Demo :

 

Now Let's Begin:

Step One: the first HTML Markup:

    <div class="wraper">
        <div class="stack_holder">
            <img src="01.jpg" class="stack_1">
            <img src="02.jpg" class="stack_2">
            <img src="03.jpg" class="stack_3">
            <img src="04.jpg" class="stack_4">
            <div class="clear"></div>
        </div>

    </div>

As you can see the  code is very simple, a  wraper div and another div with a class of stack_holder just to hold the images and four images to work on.

and I've used a separated class to each image so that I can control the transform element of the CSS3 to each image.

Step two: the begining of the css coding:

@import url(http://fonts.googleapis.com/css?family=Pathway+Gothic+One);
body{
    margin: 0;
    padding: 0;
    font: 100%;
    font-family: 'Pathway Gothic One', sans-serif;
}

*{
    margin: 0;
    padding: 0;
    font-family: 'Pathway Gothic One', sans-serif;
}
a{
    text-decoration: none;
    color: #bc7d89;
    text-align: center;
    display: block;
    font-size: 25px;
}

.wraper{
    width: 960px;
    height: 400px;
    margin: 80px auto;
    -webkit-box-shadow: 0 0 50px rgba(0,0,0,.4);
    box-shadow: 0 0 50px rgba(0,0,0,.4);
    overflow: auto;
}
.clear{
    clear: both;
}
.stack_holder{
    margin-top: 20px;
    margin-left: 20px;
}

Code Explanation :

.wraper{
    width: 960px;
    height: 400px;
    margin: 80px auto;
    -webkit-box-shadow: 0 0 50px rgba(0,0,0,.4);
    box-shadow: 0 0 50px rgba(0,0,0,.4);
    overflow: auto;
}

This is just a simple styling to the wraper div , centering the div some box shadow, with and height, just normale code.

The other codes are just for simple styling like for the anchor tag and the clear div is just to clear the float of the images.

Setp Three: Styling of the image element:

.stack_holder img{
    width: 200px;
    padding: 8px;
    background: #e8e8e8;/* old browsers */
    background: -moz-linear-gradient(left, #e8e8e8 0%, #fff 30%, #eaeaea 100%); /*firefox */
    background: -webkit-gradient(linear, top left, bottom left, color-stop(0%,#e8e8e8), color-stop(30%,#f5f5f5), fff-stop(100%, #eaeaea)); /* webkit */
    border:1px solid #d8d8d8;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    /*border: 1px solid #e1e1e1;*/
    margin: 10px;
    box-shadow: 0 0 4px rgba(0,0,0,.4);
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
    float: left;
}

Lets  Split the code:

We can Split the code into two parts :

    width: 200px;
    padding: 8px;
    background: #e8e8e8;/* old browsers */
    background: -moz-linear-gradient(left, #e8e8e8 0%, #fff 30%, #eaeaea 100%); /*firefox */
    background: -webkit-gradient(linear, top left, bottom left, color-stop(0%,#e8e8e8), color-stop(30%,#f5f5f5), fff-stop(100%, #eaeaea)); /* webkit */
    border:1px solid #d8d8d8;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    /*border: 1px solid #e1e1e1;*/
    margin: 10px;
    box-shadow: 0 0 4px rgba(0,0,0,.4);

    float: left;

This  is the common coding to the image just a simplge styling a background, border radius, box shadow, margin, and I've float it to the left;

The images looks like this:

The second part:

    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);

The transform is a css3 element and it has many properties and in this examples I've used the rotate property, to learne more about this CSS3 Property Just Go Here.

Now the images looks like this:

Step Four: Rotate the rest of the images:

Now rotate the rest of the images, with the classes that we talek about them earlier and just change the rotation (deg) value. (NB: You can use the positif values and the negative values).

Take a look at the code below:

.stack_holder img.stack_2{
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
    margin-left: -40px;
}
.stack_holder img.stack_3{
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -o-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    transform: rotate(40deg);
    margin-left: -40px;
}
.stack_holder img.stack_4{
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
    margin-left: -40px;
}

 Important: the margin I've used it to make the images the one over the other.

Take a look at the images after this code:

Step Five: Styling the hover state:

 Now  we've to style the hover state, here is the code:

.stack_holder img:hover{
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
    width: 300px;
    margin-right: -100px;
    z-index: 100;
}

First make rotation 0 (deg), this the main code of the hover state, now the transition element is just to give the hover state looks good, and the importante part is the width and margin, the width is just to make the image bigger, and the margin is to let the image in the same place, so that it won't be pushed to the right, and z-index, to make the hovered image in top of all the images.

So now all the markup is:

body{
    margin: 0;
    padding: 0;
    font: 100%;
    font-family: 'Pathway Gothic One', sans-serif;
}

*{
    margin: 0;
    padding: 0;
    font-family: 'Pathway Gothic One', sans-serif;
}
a{
    text-decoration: none;
    color: #bc7d89;
    text-align: center;
    display: block;
    font-size: 25px;
}

.wraper{
    width: 960px;
    height: 400px;
    margin: 80px auto;
    -webkit-box-shadow: 0 0 50px rgba(0,0,0,.4);
    box-shadow: 0 0 50px rgba(0,0,0,.4);
    overflow: auto;
}
.clear{
    clear: both;
}
.stack_holder{
    margin-top: 20px;
    margin-left: 20px;
}
.stack_holder img{
    width: 200px;
    padding: 8px;
    background: #e8e8e8;/* old browsers */
    background: -moz-linear-gradient(left, #e8e8e8 0%, #fff 30%, #eaeaea 100%); /*firefox */
    background: -webkit-gradient(linear, top left, bottom left, color-stop(0%,#e8e8e8), color-stop(30%,#f5f5f5), fff-stop(100%, #eaeaea)); /* webkit */
    border:1px solid #d8d8d8;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    /*border: 1px solid #e1e1e1;*/
    margin: 10px;
    box-shadow: 0 0 4px rgba(0,0,0,.4);
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
    float: left;
}
.stack_holder img.stack_2{
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
    margin-left: -40px;
}
.stack_holder img.stack_3{
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -o-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    transform: rotate(40deg);
    margin-left: -40px;
}
.stack_holder img.stack_4{
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
    margin-left: -40px;
}
.stack_holder img:hover{
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
    width: 300px;
    margin-right: -100px;
    margin-bottom: -100px;
    z-index: 100;
}

 To see the demo From Here:

 

And to Downlod the Source code From Here:

 

Thanks for reading, Waiting for you in another post On Free Premium HTML

4:57 PM