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>

            <!-- CSS pour zoom photo en mouseover sur texte -->

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>

            <!-- La photo image.gif qui est zoomée en milieu de page -->

  <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>

            <!-- Le texte qui ouvre une image en mouseover en milieu de page -->

    <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

Herman Jackson

Réponse acceptée

<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

Auteur

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

Auteur

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

zoom image en mouseover

4 réponses