Hover et décalage 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 :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#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;
}

La première des choses, c'est qu'un id doit être unique dans la page.

Ensuite, si une des images est plus grande, ça semble logique qu'elle prenne plus de place et que ça décale les autres éléments...

La balise <font> est dépréciée ; j'utiliserais plutôt un span avec un style et une propriété "color".

Remplace tes "id" par des "class".

Si les 2 images sont de taille différente, je créerais une image blanche de la taille de la plus grande, puis je collerais dessus la plus petite : cela te fera tes 2 images de même taille et ça ne décalera rien lors du survol.