Stacked Boxes Effect Using CSS - Easily create a stack of boxes that animate on mouseover.
Example: View Code Demo
<!doctype html> <html> <head> <title>Stacked boxes effect using CSS</title> <style> /* Begin HTML5 CSS3 Stacked Boxes Effect Using CSS */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The Free Public Codes Library == */ /* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ body {font-family:verdana,arial,ms sans serif; font-size:90%; color:#000000;background:#e6e6e6;text-shadow:0px 1px 0px rgba(0,0,0,0.4);} .stacked { background:#f6f6f6; border:1px solid #ccc; margin:50px auto; position:relative; width:400px; height:250px; -webkit-box-shadow:0 0 3px hsla(0,0%,0%,.1); -moz-box-shadow:0 0 3px hsla(0,0%,0%,.1); box-shadow:0 0 3px hsla(0,0%,0%,.1); } .stacked:after, .stacked:before { background:#f6f6f6; border:1px solid #ccc; bottom:-3px; content:''; height:250px; left:2px; position:absolute; width:394px; z-index:-10; -webkit-box-shadow:0 0 3px hsla(0,0%,0%,.2); -moz-box-shadow:0 0 3px hsla(0,0%,0%,.2); box-shadow:0 0 3px hsla(0,0%,0%,.2); } .stacked:before { bottom:-5px; left:5px; width:388px; } .stacked:hover:after { -webkit-transform:rotate(-3deg) translate(-25px,0); -moz-transform:rotate(-3deg) translate(-25px,0); -ms-transform:rotate(-3deg) translate(-25px,0); -o-transform:rotate(-3deg) translate(-25px,0); transform:rotate(-3deg) translate(-25px,0); } .stacked:hover:before { -webkit-transform:rotate(3deg) translate(25px,0); -moz-transform:rotate(3deg) translate(25px,0); -ms-transform:rotate(3deg) translate(25px,0); -o-transform:rotate(3deg) translate(25px,0); transform:rotate(3deg) translate(25px,0); } #words {padding:10px 10px 10px 10px;} </style> </head> <body> <div class="stacked"> <div id="words"> A stacked boxes effect using CSS<br /><br /> Roll your cursor over the stacked boxes to see the animation effect. </div> </div> <br /><br /> <div id="snippet"> [ This code example from <a href="">Stacked Boxes Effect Using CSS</a> page. ] </div> </body> </html>