Code Snippet </> Info
Snippet Name: Stacked Boxes Effect Using CSS
Description: Easily create a stack of boxes that animate on mouseover.
Example: View Code Demo
Note: Adjust the color styles and box sizes to your preferences.
Author: SnapBuilder <snippets@snapbuilder.com>
Last Modified: 2019-12-09 02:03:49
Language: css
Highlight Mode: css
|
Copy Codes: Use Free Notepad ++ |
|
Snap HTML Code Editor: Paste the source code, make changes and instantly see it in live preview. Snap HTML Code Editor
|
|
Copied To Clipboard!
<!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>
|