Schatteneffekte bei Hover-Bild

[DerSchatten]

Ich habe mir ein Script gebastelt das per Mausberührung eines Fotos, eine vergrößerte Darstellung darstellt. Zusätzlich wird die verkleinerte Darstellung mit einem Schatteneffekt belegt:

<style type="text/css">
.out
{
display:block; 
background:#bbb; 
border:1px solid #ddd; 
position:relative;
margin:1em 0;
}
 
.in
{
background:#fff; 
border:1px solid #555; 
position:relative; 
padding:5px;
font-weight:normal;
}
 
.tpin
{
top:-5px;
}
 
.rtin
{
left:5px;
}
 
  #foto {position:relative; left:500px; top:50px; width:250px; z-index:100; font-size:9;}
  #foto a img {width:240px; border:0;}
  #foto a.p1:hover {text-decoration:none; background-color:#ffffff;}
  #foto a .large {display:block; position:absolute; width:0px; height:0px; border:0px; top:0px; left:0px;}
  #foto a.p1:hover .large {display:block; position:absolute; left:-467px; top:80px; width:auto; height:auto;}
</style>

<div id="foto">
  <div class="out">
    <div class="in rtin tpin">
      <a class="p1" href="#"><img src="<?php echo $datensatz["Abbildungspfad"] ?>" />
      <img class="large" src="<?php echo $datensatz["Abbildungspfad"] ?>" /></a>
      <a> - Zum Vergrößern, Maus über Foto bewegen - </a>
    </div>
  </div>
</div>

Funktioniert grundsätzlich wunderbar. Nun hätte ich allerdings gerne das auch die vergrößerte Darstellung diesen Schatten aufweist.
Kann mir da jemand bei der Scriptgestaltung weiterhelfen?

niemand einen Tip?