Forum : zoom image en mouseover

Bonjour, je voudrai que l'image nomée image.gif s'affiche au centre de la page lorsque je passe en mouseover.
Comme ce qui est déjà fait avec la partie texte, lorsque je passe sur texteZ, une image est affichée au centre de la page.
j'ai donc le code CSS pour le texte, mais je ne sais pas comment faire pour faire la même chose avec une image.

<html> <head> <style>  body { background-color: #ffffff; } .hover-title { display: inline; pointer-events: auto; cursor: pointer; font-family: Times New Roman; font-size: 10px; } .hover-image { display: none; } body:not(.mobile) .hover-title:hover + .hover-image { display: flex; pointer-events: none; } .hover-image { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; flex-direction: column; align-items: center; justify-content: center; width: 95vw; height: 95vh; } .hover-image img { max-width: 100% ; max-height: 100% ; width: auto ; height: auto ; margin-bottom: 0; } </style> </head> <body> <div align=center> <table border=1> <tr> <td> <p align=center>  <img width=100 height=100 src="image.gif"></p> </td> <td width=200 valign=top style='width:8.0cm> <p style='margin-bottom:0cm;line-height:normal'> <span style='font-size:8.0pt;color:#000000'>Bla bla</span>  <div class="hover-title"> <b>texteZ (image mouseover centrée sur page))</b> </div> <div class="hover-image"><img src="zoom.png"></div> </tr> </table> </div> </body> </html>

Ce que je veux

faire le même code CSS qui fonctionne avec le texte mais pour une image.

Ce que j'obtiens
Pour le moment, rien

4 réponses

Herman Jackson,

il y a 2 ans

<html>
<head>
<style>
body {
background-color: #ffffff;
}

.hover-title {
display: inline;
pointer-events: auto;
cursor: pointer;
font-family: Times New Roman;
font-size: 10px;
}

.hover-image {
display: none;
}

body:not(.mobile) .hover-title:hover + .hover-image {
display: flex;
pointer-events: none;
}

.hover-image {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 0;
pointer-events: none;
flex-direction: column;
align-items: center;
justify-content: center;
width: 95vw;
height: 95vh;
}

.hover-image img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
margin-bottom: 0;
}
</style>
</head>

<body>
<div align=center>
<table border=1>
<tr>
<td>
<p align=center class="hover-title">
<b>Image (image mouseover centrée sur page)</b>
</p>
<div class="hover-image">
<img src="image.gif">
</div>
</td>
<td width=200 valign=top style='width:8.0cm'>
<p style='margin-bottom:0cm;line-height:normal'>
<span style='font-size:8.0pt;color:#000000'>Bla bla</span>
<div class="hover-title">
<b>TexteZ (image mouseover centrée sur page)</b>
</div>
<div class="hover-image">
<img src="zoom.png">
</div>
</p>
</td>
</tr>
</table>
</div>
</body>
</html>

Kiriel,

il y a 2 ans

Bonsoir, merci pour cette réponse, juste un petit souci, dans la cellule de gauche, vous avez réussi à afficher un zoom du fichier image.gif, pas contre il faudrait que dans la cellule, soit affiché l'image elle même, en fait une miniature noméeimage.gif et lorsque que l'on survolle l'image, elle s'affiche en grand au centre de la page, comme vous l'ave réalisé, il faut juste remplacer le texte par l'image.
merci beaucoup si vous pourviez me dépatouiller ça.

Kiriel,

il y a 2 ans

J'ai remplacé <b>Image (image mouseover centrée sur page)</b> par <img width=100 height=100 src="image.gif">
et ça a l'air de fonctionner, je test tout ça et je reviens vers vous si besoin.
Merci beaucoup de m'avoir consacré de votre temps.

carlo44,

il y a 2 ans