Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Miscellaneous >> Stacked Boxes Effect Using CSS


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: 2015-08-26 22:44:44

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!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 http://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>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library