J'ai une page HTML / CSS - pas de javascript - où j'essaie d'afficher un tableau / une grille d'images miniatures. Lorsque l'utilisateur passe la souris sur l'une des images, je souhaite que l'image en taille réelle soit affichée.
J'ai créé un violon pour montrer où je me trouve: https://jsfiddle.net/StephaneCharette/y50rn9g4/
Le problème que je ne sais pas résoudre: quand l'image popup est affichée, la hauteur de la ligne est modifiée ce qui pousse tout vers le bas.
J'ai réussi à fixer la largeur de chaque cellule en utilisant table-layout : fixed; puis en spécifiant une largeur pour le tableau et chaque cellule de la première ligne. (Bien que je ne sois pas certain d'avoir fait cela correctement.) Mais comment éviter que la hauteur change?
<table>
<tr>
<th style="width: 10em;">th1</th>
<th style="width: 330px;">th2</th>
<th style="width: 330px;">th3</th>
<th style="width: 330px;">th4</th>
</tr>
<tr>
<th>row1</th>
<td>some example text before the image <img class="thumb" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Alice_%28apple%29.jpg" /></td>
<td><img class="thumb" src="https://upload.wikimedia.org/wikipedia/commons/f/f1/Ambrosia_apples_2017_A3.jpg" />some example text after the image</td>
<td><img class="thumb" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Malus-Ananasrenette.jpg" /></td>
</tr>
<tr>
<th>row2</th>
<td><img class="thumb" src="https://upload.wikimedia.org/wikipedia/commons/4/41/Arkansas_Black_apples_%28cropped%29.jpg" /></td>
<td><img class="thumb" src="https://upload.wikimedia.org/wikipedia/commons/e/e8/Aroma.jpg" /></td>
<td><img class="thumb" src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Malus-Boskoop_organic.jpg" /></td>
</tr>
</table>
table, th, td
{
border:1px solid black;
padding: 0.5em;
}
table
{
border-collapse:collapse;
table-layout: fixed;
width: 1000px; // table-layout fixed seems to only works if you then give it a width
}
.thumb
{
border: 1px solid black;
width: 320px;
height: auto;
position: relative; // need to specify 'position' to use z-index
z-index: 0;
}
.thumb:hover
{
width: auto;
height: auto;
z-index: 999;
border-radius: 10px;
box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.75);
}
3 Réponses :
Remplacez simplement ce style dans votre css
table, th, td {
border: 1px solid black;
padding: 0.5em;
position: relative;
}
.thumb:hover {
width: auto;
height: auto;
z-index: 999;
border-radius: 10px;
box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.75);
position: absolute;
top: 0;
left: 0;
}
Vérifiez mon code jsfiddle ici . Également en survol , les images ont une largeur et une hauteur complètes, ce qui semble mauvais et couvre tout le reste.
.thumb:hover => width: 600px;
Lorsque je survole la première image de la deuxième ligne, l'image est plus grande mais ne pousse pas les autres images, c'est ce que vous voulez?
@Mariosnikolaou je veux que les cellules du tableau ne redimentent pas. Ni la largeur, ni la hauteur. Dans ce violon, il n'y a que 2 rangées, il n'y a donc pas trop mal, mais dans ma situation du monde réel, il y a beaucoup de lignes et j'aimerais que la grille reste en place.