Changer d'image lors d'un survol pour plusieurs images

Bonjour à tous,

Je viens vers vous car j'aimerais avoir quelques conseils. Je voudrais réaliser moi-même mon portfolio mais je débute en code.

Enfait, j'aimerais avoir quelques chose qui ressemble à ça :


C'est à dire des blocs d'images, centrés qui changent d'images au survol.
J'ai trouvé un code qui me permet de réaliser ça, mais cela me semble des fastidieux car je dois répéter le code css pour chaque image, comme ceci :

#descriptif a:hover img {
    visibility: hidden;
}

#descriptif2 a:hover img {
    visibility: hidden;
}

#descriptif3 a:hover img {
    visibility: hidden;
}

#descriptif a, #descriptif img {
    width: 200px;
   float: left;
}

#descriptif2 a, #descriptif2 img {
    width: 200px;
    float: left;
}

#descriptif3 a, #descriptif3 img {
    width: 200px;
   float: left;
}

#descriptif a {
    display: inline-block;
    background: url("../images/monimage.png") no-repeat;
    margin: 40px;
}

#descriptif2 a {
    display: inline-block;
    background: url("../images/monimage2.png") no-repeat;
    margin: 40px;
}

#descriptif3 a {
    display: inline-block;
    background: url("../images/monimage3.png") no-repeat;
    margin: 40px;
}

Et voici mon html :

<div id="descriptif">

    <a href="../pages/raconte une ville.html"><img src="../images/descriptifruv.png" alt="Accueil" /></a>

</div>


<div id="descriptif2">

    <a href="../pages/raconte une ville.html"><img src="../images/descriptifruv2.png" alt="Accueil" /></a>

</div>


<div id="descriptif3">

    <a href="../pages/raconte une ville.html"><img src="../images/descriptifruv3.png" alt="Accueil" /></a>

</div>

Enfait je suis obligée de tout répéter pour chaque blocs d'images, et aussi, je n'arrive pas à les centrer !
Y a t-il un autre moyen plus simple ? Dois-je passer par du javascript ?

J'ai conscience que mon code ressemble un peu à du bricolage et c'est pour cela que j'ai besoin de votre aide.
J'aimerais apprendre alors n’hésitez à bien tout m'expliquer

Je vous remercie

Bonjour.

Comme tu dois le savoir, vu ton code, les id doivent être unique, mais tu peux utiliser les class CSS qui te permettront de factoriser ton code, ce qui donne :

<div id="descriptif1" class="vignette">
    <a href="../pages/raconte une ville.html"><img src="../images/descriptifruv.png" alt="Accueil" /></a>
</div>

<div id="descriptif2" class="vignette">
    <a href="../pages/raconte une ville.html"><img src="../images/descriptifruv2.png" alt="Accueil" /></a>
</div>

<div id="descriptif3" class="vignette">
    <a href="../pages/raconte une ville.html"><img src="../images/descriptifruv3.png" alt="Accueil" /></a>
</div>

Avec le CSS :

.vignette a:hover img {
  visibility: hidden;
}

.vignette a, .vignette img {
  width: 200px;
  float: left;
}

.vignette a {
  display: inline-block;
  margin: 40px;
}

#descriptif1 a { background: url("../images/monimage.png") no-repeat; }
#descriptif2 a { background: url("../images/monimage2.png") no-repeat; }
#descriptif3 a { background: url("../images/monimage3.png") no-repeat; }

Après si tu as la possibilité de le faire, je te conseillerais d'utiliser les Sprites CSS qui pourrait te faciliter encore un peu la chose.
Modifié par SolidSnake (19 Aug 2014 - 08:57)

Ha oui d'accord, en fait c'était tout simple, mais bon comme je découvre petit à petit, je ne connaissais pas.
Parcontre je ne comprend toujours pas pourquoi je n'arrive pas à tout centrer.
J'ai essayer avec
- text-align: center;
et avec
- margin-left: auto; margin-right: auto;

Aussi je vais regarder les Sprites, merci pour ce conseil