Stack Elements with CSS3 Pseudo Elements

It is always a good idea to give your readers a visual appealing effect. Giving your site images or elements some great effect is one of the best way to grad readers attention.

In this tutorial, we will be using :before and :after pseudo elements to stack multiple layers untop each other without making it look clutter and also reducing the length of our html markup. We just need two to three line of html code to get started, our CSS pseudo element will handle the rest.

The HTML Markup

The div class used below is just an example, choose a class id base on the style you decide to use i.e "stack", "stack rotated-right", "stack twisted", "stack rotated-left".

<div class="stack">
    <img src="IMAGE-URL" />
</div>

The CSS Markup

The CSS code for each style is arranged according to the image above.

Simple Style 1

.stack {float: left; width: 200px; margin: 15px; position: relative; z-index: 10; }
.stack img { max-width: 200px; height: auto; vertical-align: bottom; border: 5px 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);
}
.stack:last-of-type { margin-right: 0; }

.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) */

Rotated-right Style 2

.stack { float: left; width: 200px; margin: 15px; position: relative; z-index: 10; }
.stack img { max-width: 200px; height: auto; vertical-align: bottom; border: 5px 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);
}
.stack:last-of-type { margin-right: 0; }

.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) */

/* Second stack example (rotated right) */
.stack.rotated-right:before {
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    transform: rotate(2deg);
}
.stack.rotated-right:after {
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    transform: rotate(3deg);
}  

/* Reset all rotations on hover */
.stack:hover:before, .stack:hover:after {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
}

Twisted Style 3

.stack { float: left; width: 200px; margin: 15px; position: relative; z-index: 10; }
.stack img { max-width: 200px; height: auto; vertical-align: bottom; border: 5px 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);
}
.stack:last-of-type { margin-right: 0; }

.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) */

/* Third stack example (twisted style) */
.stack.twisted:before {
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    transform: rotate(4deg);
}   
.stack.twisted:after {
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
    transform: rotate(-4deg);
}

/* Reset all rotations on hover */
.stack:hover:before, .stack:hover:after {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
}

Rotated-left Style 4

.stack { float: left; width: 200px; margin: 15px; position: relative; z-index: 10; }
.stack img { max-width: 200px; height: auto; vertical-align: bottom; border: 5px 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);
}
.stack:last-of-type { margin-right: 0; }

.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) */

/* Fourth stack example (rotated left) */
.stack.rotated-left:before {
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    transform: rotate(-3deg);
}
.stack.rotated-left:after {
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: rotate(-6deg);
    -moz-transform: rotate(-6deg);
    transform: rotate(-6deg);
}

/* Reset all rotations on hover */
.stack:hover:before, .stack:hover:after {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
}

There may be some line to edit in the first lines of code that appears under each style section.
Because we’re going for a gallery effect, i have floated the images to the left and set a fairly arbitrary margin of 15px to space them out nicely. The height and width are set to the dimensions (200px/200px) of the image that i used as an example. I have also added a fairly thick white border line with a shadow to make it more appealing.

The last section of the code will reset both the twisted and rotated style back to their original position on hover.

/* Reset all rotations on hover */
.stack:hover:before, .stack:hover:after {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
}

All the stack effects should work impressively well in most major browsers but not in internet explorer.
I hope you enjoyed today tutorial as i do? Stay tuned, till then. Peace!

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz