Imagen con enlace dentro de otra imagen con enlace

[Carlmycol]

Pues exactamente lo que dice en el título encesito hacer, se que se puede resolver poniendo la imagen como fondo de un div y dentro dl div la otra imagen, sin embargo, debo hacerlo con imágenes miniatura y no hallo la forma de encajar la imagen haciéndola proporcionalmente mas pequeña sin usar javascript. ¿Alguna idea? Intenté con z-index y no funcionó, quizás fue un uso erróneo.

Tengo esto.

Código HTML:

<div id="categories" class="sortableList">
 
                              <div id="img_11" style="float:left; border:#000;">
 
                <a href="#">H</a>
 
                <img src="eventos/11/1.jpg" />
 
               </div>
 
                         <div id="img_9" style="float:left; border:#000;">
 
                <a href="#">H</a>
 
                <img src="eventos/9/1.jpg" />
 
               </div>
 
                         <div id="img_10" style="float:left; border:#000;">
 
                <a href="#">H</a>
 
                <img src="css_files/unexist.png" />
 
               </div>
 
                    <hr style="clear:both;border:0;visibility:none;">
 
     </div>
 

Y este css

Código CSS:

#categories div
 
{
 
    margin-left:2px;
 
    margin-top:20px;
 
    cursor:move;
 
}
 
#categories img, #categories div
 
{
 
    width:200px; height:286px;
 
}
 
#categories div a
 
{
 
    z-index:2;  
 
}
 

Si tienen alguna idea... Yo quiero hacer algo esteticamente como youtube en videos destacados, que encima de la miniatura sale un enlac para añadirlo a lista de reproduccion.

Saludos y gracias de antemano