28220 sujets

CSS et mise en forme, CSS3

Bonjours à tous
Je suis sur un site et je voudrais, au survol d'une image afficher un texte par dessus l'image. Le probléme c'est que pour positioner le texte, j'utilise un positionement absolu, donc les diff. textes sont tous au même endroit. En gros, je voudrais des infobulle à plusieurs endroit.


<div id="cds">
                    
                    <a class="plus" href="#"><img class="cd" src="images/cd3_tn.jpg" /><span></span></a><br />
                    <a class="plus" href="#"><img class="cd" src="images/cd2_tn.jpg" /><span></span></a><br />
                    <a class="plus" href="#"><img class="cd" src="images/cd1_tn.jpg" /><span></span></a><br />
                    <a class="plus" href="#"><img class="cd" src="images/cd5_tn.jpg" /><span></span></a><br />
                    <a class="plus" href="#"><img class="cd" src="images/cd4_tn.jpg" /><span></span></a><br />
                
                </div>



#cds {
    margin-left: 19px;
}
.cd {
    margin: 5px 0 5px 0;
    border-left: solid 5px #eeeeee;
    border-top: solid 5px #eeeeee;
    border-right: solid 5px #e1e1e1;
    border-bottom: solid 5px #e1e1e1;
}
a.plus:link span {
    display: none;
    position: absolute;
    width: 52px;
    height: 22px;
}
a.plus:hover span {
    display: block;
    position: absolute;
    margin: 33px 0 0 14px;
    background: url(images/plus.png);
    background-repeat: no-repeat;
    text-align: center;
    color: #cccccc;
    text-decoration: none;
}


Si vous voulez voir le résultat :
http://vincentlenoir.d.free.fr/Radio%20re-design/

Merci
Modifié par Vince71 (15 Jan 2006 - 11:30)
Merci Smiley biggrin
J'ai simplement mis mes liens dans des div, et mis le span avant l'image (pour positionner).
Modifié par Vince71 (15 Jan 2006 - 11:30)