Hola C2am,
Solo tengo trozos sin sentido del código ya que llevo una hora experimentando con varias cosas que he encontrado en internet, pero nada se ha acercado a lo que buscaba.
El html de las imagenes sería algo así (no sé como pondría el texto por ahí en medio):
Código HTML:
<div class="footer">
<ul class="imagenes">
<li class="imagen1">
<a title="Imagen 1" href="#">
<span>Imagen 1</span></a>
</li>
<li class="imagen2">
<a title="Imagen 2" href="#">
<span>Imagen 2</span></a>
</li>
</ul>
</div>
Y el CSS iría más o menos por aquí, pero no sé muy bien:
Código:
.imagenes {
position: absolute;
top: 15px;
right: 0px;
display: block;
overflow: hidden;
}
.imagenes li {
display: block;
width: 32px;
height: 32px;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.imagen1 a {
display: block;
width: 32px;
height: 32px;
text-indent: -9000px;
background: url(../images/footer_brands.png);
}
.imagen1 a:hover {
background-position: 0px -32px;
}
Un saludo