This website is currently in beta. Side effects may occur.

CSS3 Card Stack Effect

Code sample to create a Card Stack Effect using only HTML and CSS3.




CSS3 Card Stack Effect

Demo 1

Create an empty HTML file and paste the code below:

<!DOCTYPE html>
<html>
  <head>
    <title>CSS3 Card Stack</title>
        <style>
        
            body {  background: url('http://cdn.backgroundhost.com/backgrounds/subtlepatterns/elastoplast.png') repeat }
        
            * {margin: 0; padding: 0; color: #4f4f4f;}
            
            .wrapper { width: 960px; margin: 0 auto; }
            .holder { height: 350px; margin: 30px; float: left;}
            
            div[class*='card']
            {
                position: relative;
                margin: 0 auto;
            }
            
            div[class*='card']:hover
            {
                transition: box-shadow ease 0.5s;
                transition: border ease 0.3s;
                box-shadow: 5px 5px 12px 0px #aaa;
                border: 3px solid #DEBE99;
            }
            
            div[class*='card'], div[class*='card']:before, div[class*='card']:after  {  

                    width: 240px; height: 100%;
                    background: bisque;
                    box-shadow: 2px 2px 10px 0px #aaa;
                    border: 3px solid #fff;
                        
                    }
                        
            div[class*='card']:before, div[class*='card']:after  {    
                    content: "";
                    position: absolute;
                    z-index: -1;
            }            
            
            div[class*='card']:before {
                top: 0px; left: -10px;
                -webkit-transform: rotate(-5deg);
                -moz-transform:    rotate(-5deg);
                -ms-transform:     rotate(-5deg);
                -o-transform:      rotate(-5deg);
                transform:         rotate(-5deg);
            }    
            
            div[class*='card']:after {
                top: 5px; left: 0px;
                -webkit-transform: rotate(4deg);
                -moz-transform:    rotate(4deg);
                -ms-transform:     rotate(4deg);
                -o-transform:      rotate(4deg);
                transform:         rotate(4deg);
            }
            
            p { margin: 10px;  line-height: 150%; font-size: 120%; }

            h1 { font-size: 150%; padding: 30px; }
            
            .header { margin: 20px; }
        
        </style>
    
  </head>
  <body>
    <div class="wrapper">
    <div class="header">
        <div class="card">
            <h1>CSS Card Stack</h1>
        </div>
    </div>
      <div class="holder">
        <div class="card">
          <p>Parturient quam fermentum tristique sem fames dis urna a id a parturient a maecenas est a vel sed metus magnis varius
          eu.Conubia nascetur leo hendrerit viverra dictumst tristique vestibulum malesuada volutpat litora sed condimentum.</p>
        </div>
      </div>
      <div class="holder">      
        <div class="card">
          <p>Parturient quam fermentum tristique sem fames dis urna a id a parturient a maecenas est a vel sed metus magnis varius
          eu.Conubia nascetur leo hendrerit viverra dictumst tristique vestibulum malesuada volutpat litora sed condimentum.</p>
        </div>
      </div>
      <div class="holder">      
        <div class="card">
          <p>Parturient quam fermentum tristique sem fames dis urna a id a parturient a maecenas est a vel sed metus magnis varius
          eu.Conubia nascetur leo hendrerit viverra dictumst tristique vestibulum malesuada volutpat litora sed condimentum.</p>
        </div>
      </div>        
    </div>
  </body>
</html>

Variation

Demo 2

<!DOCTYPE html>
<html>
<!-- Kay Lohn Interactive | www.kaylohn.com | http://kaylohn.com/journal/css3-card-stack-effect/ -->
  <head>
    <title>CSS3 Card Stack</title>
    
        <link href='http://fonts.googleapis.com/css?family=Dawning+of+a+New+Day' rel='stylesheet' type='text/css'>
        
        <style>
        
            body {  background: url('http://cdn.backgroundhost.com/backgrounds/subtlepatterns/clean_textile.png') repeat }
        
            * {margin: 0; padding: 0; color: #4f4f4f; font-family: 'Dawning of a New Day', cursive; }
            
            .wrapper { width: 960px; margin: 0 auto; }
            .holder { height: 350px; margin: 30px; float: left;}
            
            div[class*='card']
            {
                position: relative;
                margin: 0 auto;
            }
            
            div[class*='card']:hover
            {
                transition: box-shadow ease 0.5s;
                transition: border ease 0.3s;
                box-shadow: 5px 5px 12px 0px #aaa;
                border: 3px solid #DEBE99;
            }
            
            div[class*='card'], div[class*='card']:before, div[class*='card']:after  {  

                    width: 240px; height: 100%;
                    background: inherit;
                    box-shadow: 2px 2px 10px 0px #aaa;
                    border: 3px solid #fff;
                        
                    }
                        
            div[class*='card']:before, div[class*='card']:after  {    
                    content: "";
                    position: absolute;
                    z-index: -1;
            }            
            
            div[class*='card']:before {
                top: 0px; left: -10px;
                -webkit-transform: rotate(-5deg);
                -moz-transform:    rotate(-5deg);
                -ms-transform:     rotate(-5deg);
                -o-transform:      rotate(-5deg);
                transform:         rotate(-5deg);
            }    
            
            div[class*='card']:after {
                top: 5px; left: 0px;
                -webkit-transform: rotate(4deg);
                -moz-transform:    rotate(4deg);
                -ms-transform:     rotate(4deg);
                -o-transform:      rotate(4deg);
                transform:         rotate(4deg);
            }
            
            p { margin: 10px;  line-height: 150%; font-size: 120%; oveflow: hidden; }

            h1 { font-size: 130%; padding: 30px; }
            
            .header { margin: 20px; }
            
            .card img { display: block; margin: 0 auto;}
            
            .bg { background: bisque !important; }
            
            .bg-1 { background: url('http://cdn.backgroundhost.com/backgrounds/subtlepatterns/lined_paper.png') repeat !important;}
            
            .bg-2 { background: url('http://cdn.backgroundhost.com/backgrounds/subtlepatterns/dark_wood.png') repeat !important;}

            .color-white { color: white !important; }
            .color-crimson { color: crimson !important; }
            
            .deco-symbol { font-size: 300%; text-align: center; }
            
            .symbol-card:hover { border: 3px solid crimson !important; }
            .image-card:hover { border: 3px solid #9898A5 !important; }
            
            h2 { font-size: 150%; padding: 12px; }
        
        </style>
    
  </head>
  <body>
    <div class="wrapper">
    <div class="header">
        <div class="card bg">
            <h1>CSS Card Stack</h1>
        </div>
    </div>
      <div class="holder">
        <div class="card bg-1 image-card">
          <img src="http://placehold.it/240x100">
          <p>Parturient quam fermentum tristique sem fames dis urna a id a parturient a maecenas est a vel sed metus magnis.</p>
          <p>Conubia nascetur leo hendrerit viverra dictumst tristique vestibulum malesuada.</p>
          
        </div>
      </div>
      <div class="holder">      
        <div class="card bg-2 symbol-card">
        <p class="deco-symbol color-crimson">&hearts;</p>
          <p class="color-white">Parturient quam fermentum tristique sem fames dis urna a id a parturient a maecenas est a vel sed metus magnis varius
          eu.Conubia nascetur leo hendrerit viverra dictumst tristique vestibulum malesuada volutpat litora sed condimentum.</p>
        </div>
      </div>
      <div class="holder">      
        <div class="card simple-card bg">
          <h2>Fermentum tristique!</h2>
          <p>Parturient quam fermentum tristique sem fames dis urna a id a parturient a maecenas est a vel sed metus magnis varius
          eu.Conubia nascetur leo hendrerit viverra dictumst tristique vestibulum malesuada volutpat litora sed condimentum.</p>
        </div>
      </div>        
    </div>
  </body>
</html>