Superponer icono pequeño a una imágen

[g05l21]

A ver, aquí tienes el HTML de cada imagen

Código HTML:

 <li class="thumb">
      <a title="More info on Movement"><img width="150" height="112" src="./wordpress/wp-content/thumbs/150-movement.png" alt="More info on Movement"/></a>
      <div class="metadata"><a  title="Download">Download</a><a href= class="demo" title="Demo">Demo</a><a class="info" title="More info">More info</a></div>
    </li> 

y aquí el css de esas etiquetas.

Código HTML:

.thumb a {
  border: 1px solid #ccc;
  display: block;
  padding: 5px;
}
.thumb a:hover {
  background: #ff6;
  border: 1px solid #ff6;
}
.thumb a img {
  border: none;
}

.thumb.current a {
  background: #ff6;
  border: 1px solid #ff6;
}
ul#randomThemes {
  display: inline;
  clear: both;
  list-style-type: none;
}

#randomThemes li {
  display: inline;
  position: relative;
  float: left;
  margin-left: 20px;
}

#randomThemes li a {
  margin: 10px 0;
}

#randomThemes .metadata {
  position: absolute;
  top: 115px;
  left: 90px;
  text-indent: -3000px;
}

#randomThemes .metadata:hover {
  opacity: 1;
}

#randomThemes .metadata a {
  display: inline;
  position: relative;
  border: none;
  float: left;
  line-height: 1.6em;
  -khtml-opacity: .4;
  filter: alpha(opacity=40);
  opacity: .4;
  padding: 0 2px;
  margin: 0;
  width: 20px;
}

#randomThemes .metadata a:hover {
  -khtml-opacity: 1;
  filter: alpha(opacity=100);
  opacity: 1;
}

#randomThemes .metadata a:hover { 
  /*background-color: #ff6;*/
}
#randomThemes a.info {
  background: url( wrc-images/info.gif ) no-repeat center center;
}

#randomThemes a.demo {
  background: url( wrc-images/demo.gif ) no-repeat center center;
}

#randomThemes a.download {
  background: url( wrc-images/download.gif ) no-repeat center center;
}

No se si he puesto de más o de menos, simplemente he hecho un copy/paste

De todos modos te recomiendo que uses firefox con el plugin webdeveloper, que para estas cosas viene muy bien (el código con un Ctrl+Shift+U y el css con un Ctrl+Shift+C te salen directamente) además de tener otras muuchas utilidades... (Parezco un anuncio)

Ya nos comentarás como queda la cosa (que la verdad me parece bastante interesante para incluir en algún que otro lado)

Saludos