Obrigado pela dica, funcionou mas surgiram algumas questoes:
tenho mesmo de usar um div e neste caso ele tem margin e padding e neste momento o div embora se sobreponha á imagem não está alinhado com o fundo.
A outra questão é que ao colocar a opacidade tudo dentro do div carroncel está a ficar a herdar a opacidade desse div e não é suposto. Já tentei colocar a opacidade especificamente nessas imagens a 100% mas não alterou nada.
Aqui está o código html:
<div class="multi-destaques">
<div class="imagem-destaques">
<img src="images/multi-destaques1.png" alt="Multidestaques" />
<div id="carroncel"><div id="carroncel-nav-esq"><img src="images/btn-destaques-esq.gif" alt="Esquerda" /></div>
<ul>
<li><img src="images/icon-multidestaques1.gif" alt="Multidestaques1" /></li>
<li><img src="images/icon-multidestaques2.gif" alt="Multidestaques2" /></li>
<li><img src="images/icon-multidestaques3.gif" alt="Multidestaques3" /></li>
<li><img src="images/icon-multidestaques4.gif" alt="Multidestaques4" /></li>
<li><img src="images/icon-multidestaques5.gif" alt="Multidestaques5" /></li>
<li><img src="images/icon-multidestaques6.gif" alt="Multidestaques6" /></li>
</ul>
<div id="carroncel-nav-dir"><img src="images/btn-destaques-dir.gif" alt="Direita" /></div>
</div><!-- Carroncel -->
</div><!-- imagem-destaques -->
Aqui está o CSS:
.multi-destaques { background:#666666; width:600px; height:260px; margin-bottom:30px; }
.multi-destaques .imagem-destaques { float:left; width:400px; height:260px; }
.multi-destaques .imagem-destaques img {
position: relative;
display: block;
}
.multi-destaques .imagem-destaques #carroncel {
background: #000;
filter:alpha(opacity=55);
opacity:.55;
color: #fff;
position: absolute;
bottom:0;
width:550px;
height:50px;
padding:0;
margin-left:20px;
margin-right:20px;
}
.multi-destaques .imagem-destaques #carroncel #carroncel-nav-esq { float:left; }
.multi-destaques .imagem-destaques #carroncel #carroncel-nav-dir { float:right; }
.multi-destaques #carroncel ul {
list-style:none;
margin:0;
padding:0;
}
.multi-destaques #carroncel ul li { display:inline; }
.multi-destaques #carroncel ul li img { float:left; margin:0 10px; }