| 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 https://snapbuilder.com 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="http://snapbuilder.com/code_snippets/copy_code_snippet_147.html">Stacked Boxes Effect Using CSS</a> page. ]
</div>
</body>
</html>
|
Scroll