No necesitas ningún div. El css de los enlaces:
a.hover1 {background: url(hover1.png);}
a.hover2 {background: url(hover2.png);}
a.hover3 {background: url(hover3.png);}
Y una clase añadida a cada uno de ellos, los pongo por claridad en diferentes lineas:
<a class="linkop hover1" href="#"><img src="sombra.png" width="320" height="140" /></a>
<a class="linkop hover2" href="#"><img src="sombra.png" width="320" height="140" /></a>
<a class="linkop hover3" href="#"><img src="sombra.png" width="320" height="140" /></a>
sombra.png es la imagen oscura con transparencia. Puedes hacerla desaparecer cuando pases por encima mediante opacidad:
a.linkop:hover img {
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
-khtml-opacity: 10;
border: 0px;
}
o bien mediante la propiedad visibility:
a.linkop:hover img {
visibility:hidden;
border: 0px;
}