Glad to see that you are still playing around with this one. :D
-Let's have some more fun with this... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
* {padding:0; margin:0;}
#container {position:relative; width: 500px; height:395px; border:1px solid #000; background:#000; }
.card1, .card2, .card3, .card4, .card5 {position: absolute; background:#454545; border:1px solid #000; width:130px; padding:3px; height:230px; color:#fff; padding:10px; }
.card1 {margin:120px 0 0 20px;}
.card2 {margin:95px 85px;}
.card3 {margin:70px 170px;}
.card4 {margin:45px 245px;}
.card5 {margin:20px 330px;}
a.card1:visited, a.card2:visited, a.card3:visited, a.card4:visited, a.card5:visited {background-color:white; z-index:1000; color:black;}
a.card1:hover, a.card2:hover, a.card3:hover, a.card4:hover, a.card5:hover {background-color:red; z-index:1000; color:white}
a.card1:active, a.card2:active, a.card3:active, a.card4:active, a.card5:active {background-color:silver; z-index:1000; color:blue}
</style>
</head>
<body>
<div id="container">
<h2 style="position:absolute; left:20px; top:10px; color:white;">Container Box</h2>
<h2 style="position:absolute; right:20px; bottom:10px; color:white;">Container Box</h2>
<a href="#" class="card1">
first card is this card</a>
<a href="#" class="card2">
second card can be this card right here</a>
<a href="#" class="card3">
third card is just like the other cards</a>
<a href="#" class="card4">
fourth card come next, after the third card</a>
<a href="#" class="card5">
fifth card is the last card of the deck</a>
</div>
</body>
</html>