Эффект перекрывания z-index

 CSS

#ten_of_diamonds {
 position: absolute;
 left: 100px;
 top: 100px;
 z-index: 1;
 }

 #jack_of_diamonds {
 position: absolute;
 left: 115px;
 top: 115px;
 z-index: 2;
 }

 #queen_of_diamonds {
 position: absolute;
 left: 130px;
 top: 130px;
 z-index: 3;
 }

 #king_of_diamonds {
 position: absolute;
 left: 145px;
 top: 145px;
 z-index: 4;
 }

 #ace_of_diamonds {
 position: absolute;
 left: 160px;
 top: 160px;
 z-index: 5;
 }

HTML

<div id="ten_of_diamonds">

 <img src="diamonds_10.gif" alt="10 of diamonds" width="70" height="96">
 </div>

 <div id="jack_of_diamonds">
 <img src="diamonds_jack.gif" alt="Jack of diamonds" width="70" height="96">
 </div>

 <div id="queen_of_diamonds">
 <img src="diamonds_queen.gif" alt="Queen of diamonds" width="70" height="96">

 </div>

 <div id="king_of_diamonds">
 <img src="diamonds_king.gif" alt="King of diamonds" width="70" height="96">
 </div>

 <div id="ace_of_diamonds">
 <img src="diamonds_ace.gif" alt="Ace of diamonds" width="70" height="96">

 </div>