Bonjour,

j'affiche une image et au survol de celle-ci je veux en afficher une autre (généralement plus grande) et je voudrais la centrer sur la première. C'est le centrage qui ne se fait pas. Et malgré beaucoup de tentatives je n'y parviens pas.
Mes tests sont visibles dans https://peindreavecanthony.go.yj.fr/galerieAW-test.php : pour les 2 premières images le problème n'est pas visible, c'est dans les suivants...
Merci de votre aide.

mon
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    <main id="ltableaux">
 
       <figure class="row">
        <figcaption>
          <h2>La régate</h2>
          <h4>Acrylique sur toile<br>2023<br>100x80</h4>
        </figcaption>
        <div class="overlay-image">
          <img class="image" src="medias/2010_03_La_regate.jpg" alt="La régate" data-size="100 x 80" loading="lazy">
          <div class="normal">
          </div>
          <div class="hover">
            <img class="image" src="medias/presentation_la_regate.jpg" alt="Alt text hover" />
          </div>
        </div>
      </figure>
<!-- ...  idem pour les autres images (au non de fichier près) ... -->
et le css :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
figure.row {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  margin: auto;
  min-height: 700px;
  border-bottom: 1px solid #AAA;
  flex-wrap: wrap;
}
 
figure.row:last-child {
  border: none;
  margin-bottom: 1em;
}
 
.row figcaption h2 {
  text-shadow: none;
  text-transform: none;
}
 
.row figcaption {
  align-self: flex-start;
  font-size: 1.2em;
  width: 400px;
}
 
.row img {
  margin: auto;
  max-height: 600px;
  max-width: 900px;
  border: .25em solid #FFF;
  box-shadow: 0 0 .5em #888;
  z-index: 900;
}
 
.row h2 {
  font-size: 1.2em;
}
 
#ltableaux {
  float: left;
  background-color: rgb(247, 247, 188);
  padding: 10px 0px 20px 0;
  width: 100%;
  margin: auto;
}
 
#ltableaux img {
  height: auto;
}
 
#ltableaux h2 {
  padding-top: 20px;
  padding-bottom: 20px;
}
 
.overlay-image {
  position: relative;
  height: auto;
  /* width: 900px; */
}
 
/* Image originale */
.overlay-image .image {
  display: block;
  height: auto;
}
 
/* Overlay */
.overlay-image .hover {
  position: absolute;
  top: 0;
  height: auto;
  opacity: 0;
  transition: .5s ease;
}
 
/* Apparition overlay sur passage souris */
.overlay-image:hover .hover {
  opacity: 1;
}