css background image over image

[grifone]

raga,
vorrei visualizzare un'immagine sopra un un'altra immagine,
in pratica ho un elenco prodotti con le miniature dei prodotti, se un prodotto è in offerta
vorrei far comparire sopra l'immagine un'altra immaginetta (+ piccola) con l'indicazione
offerta speciale

non ci riesco, ho paura che non sia possibile

[fcaldera]

tranquillo ci sono diverse possibilità per farlo.
ti servirebbe anche il supporto di browser come IE7 e IE6 ?

[grifone]

certo,
IE7 direi proprio di si,
IE6 posso anche evitare (anche se sarebbe meglio lo supportasse),

se puoi farmi un esempio al volo o indicarmi qualche sito che lo fa te ne sarei grato,
tieni presente che la lista prodotti viene generata in maniera dinamica leggendo informazioni da db; e che la miniatura del prodotto è (e deve per forza essere) un tag IMG e non per esempio un div con l'immagine come background, quindi al momento ho una roba tipo:

<div class="box">
    <p class="zoomer" id="productId_xx">
        <a href="#" title="">
            [img]immagine.jpg[/img]
        </a>
    </p>
...
...
</div>
<div class="box">
...
...
</div>
...
...

[fcaldera]

    <p class="zoomer" id="productId_xx">
        <a href="#" title="">
            [img]immagine.jpg[/img]
            [img]offertaspeciale.png[/img]
        </a>
    </p>

e il css

.zoomer {
  position: relative;
  z-index: 1;
}

.zoomer a img:first-child {
 height : 100px;
 width: 100px; 
}


.zoomer img + img {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  height: 30px; /* decidi tu */
  width: 30px; /* idem */
  display: block;
}

dovrebbe fare al caso tuo. va fino a IE7 compreso

p.s. togli width e height dal tag html, non devono stare lì


Ciao

[grifone]

Perfetto!!!!
è esattamente quello che volevo.

grazie mille.