[résolu] Problème hover sur image

Salut à tous,

j’essaie de créer un hover avec 2 images de tailles différentes dans un tableau.

Cependant, j'ai un problème : lorsque je passe ma souris sur l'élément tous les autres élément des cellules du tableau se déplace.

Voici mon code :

<table>
    <tr>
        <td width="233" >
            <a href="http://www.aonassurances.com" style="text-decoration:none; color:black;">
                <div id="Library"><p id="texte1" align="center"><font color="#9C9C9A">ASSURANCE</font> <br>AUTO</p></div>
            </a>
        </td>
        <td width="233">
            <a href="http://www.google.fr" style="text-decoration:none; color:black;">
                <div id="Library"><p id="texte1" align="center"><font color="#9C9C9A">ASSURANCE</font> <br>SANTE</p></div>
            </a>
        </td>
        <td width="233">
            <a href="http://www.google.fr" style="text-decoration:none; color:black;">
                <div id="Library"><p id="texte1" align="center"><font color="#9C9C9A">ASSURANCE</font> <br>AUTRES</p></div>
            </a>
        </td>
    </tr>
</table>
 
<style>
#Library {
   background-image: url('http://www.heberger-image.fr/data/images/59286_auto1.png');
   background-repeat: no-repeat ;
   background-position: center center;
   height: 130px;
   width: 220px;
   z-index: 2;
   box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.7);
   border-radius: 7px;
}
#Library:hover {
   background-image: url('http://www.heberger-image.fr/data/images/32240_auto2.png');
   background-repeat: no-repeat ;
   background-position: center center;
   box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.7);
   border-radius: 7px;
   height: 160px;
   width: 220px;
    
}
 
#texte1 {
padding-top: 85px;
padding-left: 5px;
font-weight:bold;
font-family:Arial;
}
</style>

Modifié par truser54 (18 Mar 2014 - 11:46)

Tu peut rajouter un : td{vertical-align: top;}
mais sinon je ne suis pas sur de l'utilité "sémantique" d'un tableau pour faire cela, une simple liste ul aurait à mon avis plus de sens.

Merci bien, cela marche parfaitement.
Concernant l'utilisation des ul et li je ne pouvais les utiliser pour cet exercice.

Un exercice qui oblige l'utilisation de tableaux pour faire des mises en pages...