Card Stack – Üst üste sıralanmış kareler

Css3 ile hazırlanmış güzel bir kart örneği. Lane Olson tarafından hazırlanmış  olan bu örnek üst üste  yığılmış  üç  adet karttan oluşuyor. Mouse  ile  kartların üzerine geldiğinizde kartlar  açılıyor  ve mouse  hangi kartın üstünde ise o kart  biraz  büyüyüp  diğer  kartların önünde  görünüyor.

Kullanım

Css : 

 .card1 {
  left: 50%;
  margin-left: -13em;
  z-index: 10;
  transform: rotatez(-3deg);
  -moz-transform: rotatez(-3deg);
  -webkit-transform: rotatez(-3deg);
  transition: all 0.5s ease-out 0.3s;
}
.card2 {
  left: 50%;
  margin-left: -12em;
  z-index: 9;
  transition: all 0.5s ease-out 0.15s;
}
.card3 {
  left: 50%;
  margin-left: -11em;
  z-index: 8;
  transform: rotatez(3deg);
  -webkit-transform: rotatez(3deg);
  -moz-transform: rotatez(3deg);
  transition: all 0.5s ease-out;
}

body {
  background: #666666;
  font-family: Georgia;
  font-size: 0.75em;
  line-height: 1.5em;
}
h1 {
  font-family: Helvetica, Arial, sans-serif;
}
.card-container {
  position: relative;
  width: 18em;
  margin: 0 auto;
}
.card {
  position: absolute;
  top: 0;
  background: #fff;
  box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.65);
  border-radius: 0em;
  padding: 2em;
  width: 20em;
  max-width: 20em;
  -webkit-backface-visibility: hidden;
}
.card a {
  margin: 0em -2em;
  display: block;
  width: 120%;
  max-width: 24em;
  position: relative;
  line-height: 1em;
}
.card a:after {
  content: "";
  position: absolute;
  left: 500;
  right: 500;
  top: 0px;
  bottom: 1px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}
.card h1 {
  margin-top: 0;
}
.card p {
  line-height: 1.75em;
  margin-bottom: 0;
}
.card-container:hover .card,
.card-container.hover .card {
  opacity: 0.9;
  transform: scale(0.95);
  -webkit-transform: scale(0.95);
  margin-left: -12em;
}
.card-container:hover .card:hover,
.card-container.hover .card:hover,
.card-container:hover .card.hover,
.card-container.hover .card.hover {
  opacity: 1;
  z-index: 11;
  transform: scale(1);
  -webkit-transform: scale(1);
}
.card-container:hover .card1,
.card-container.hover .card1 {
  transform: rotatez(0deg) scale(0.95);
  -webkit-transform: rotatez(0deg) scale(0.95);
}
.card-container:hover .card2,
.card-container.hover .card2 {
  left: 0%;
}
.card-container:hover .card3,
.card-container.hover .card3 {
  left: 100%;
}
img {
  max-width: 100%;
}

 Html : 

    <div id="stack1" class="card-container start">
        <section id="card1" class="card card1">
             <h1>Card 1</h1>
 <a href="#">
                <img src="3.jpg" />
            </a>

            <p>This was the first period where evidence of dinosaurs is present, though they were not there at the very beginning. It began right after the Permian mass extinction which wiped out 90% of all life and marks the beginning of the Mesozoic Era.</p>
        </section>
        <section id="card2" class="card card2">
             <h1>Card 2</h1>
 <a href="#">
                <img src="2.jpg" />
            </a>

            <p>This was the first period where evidence of dinosaurs is present, though they were not there at the very beginning. It began right after the Permian mass extinction which wiped out 90% of all life and marks the beginning of the Mesozoic Era.</p>
        </section>
        <section id="card3" class="card card3">
             <h1>Card 3</h1>
 <a href="#">
                <img src="1.jpg/" />
            </a>

            <p>This was the first period where evidence of dinosaurs is present, though they were not there at the very beginning. It began right after the Permian mass extinction which wiped out 90% of all life and marks the beginning of the Mesozoic Era.</p>
        </section>
    </div>