Discussion :

[awalter1]

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

[NoSmoking]

Bonjour,
pour le centrage horizontal/vertical d'un élément dans son parent, ce qui est le cas de ce que tu cherches à faire il y a la méthode :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
elem-parent {
  position: relatif;  /* pour servir de référent */
}
elem-centré {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Important :
Lors d'un décalage avec un left:50%, le pourcentage se réfère à la dimension du parent alors qu'avec un transform: translateX(-50%) le pourcentage se réfère à la dimension de l'élément.

[laurentSc]

avec un transform: translateX(-50%) le pourcentage se réfère à la dimension de l'élément.

Bonjour, je cherche à comprendre ta réponse ; le X est pas en trop ? transform: translate(-50%), non ?

[awalter1]

Merci NoSmoking, exactement ce qu'il fallait

[NoSmoking]

Bonjour, je cherche à comprendre ta réponse ; le X est pas en trop ? transform: translate(-50%), non ?

Pas forcément !

transform: translate(<decalageHorizontal>, <decalageVertical>) serait effectivement une autre façon d'écrire.

Tout comme translateY(<decalageVertical>) montre l'intention de décalage sur l'axe vertical, transform: translateX(<decalageHorizontal>) montre l'intention de décalage sur l'axe horizontal.

En restant sur le plan 2D :
• transform: translateX(-50%) vaut effectivement transform: translate(-50%, 0) ou encore transform: translate(-50%) 
de même
• transform: translateY(-50%) vaut effectivement transform: translate(0, -50%) mais en aucun cas transform: translate(-50%) 

Après cela reste un choix d'écriture

[awalter1]

Une question complémentaire m'est apparue : au moment du hover l'image prévue se superpose à la précédente.
Etant donné qu'en fonction des tailles d'images, il arrive qu'on voit encore l'image de derrière : il faudrait alors la rendre invisible pendant le survol.
J'ai essayé d'ajouter :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.overlay-image:hover .image {
    opacity: 0;
}

dans

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
 
.overlay-image {
    position: relative;
    height: auto;
    /* width: 900px; */
}
 
/* Image originale */
.overlay-image .image {
    display: block;
    height: auto;
}
 
/* Overlay */
.overlay-image .hover {
    /* height: auto; */
    opacity: 0;
    transition: .5s ease;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
 
/* Apparition overlay sur passage souris */
.overlay-image:hover .hover {
    opacity: 1;
}

mais ça fait disparaitre l'image de devant (hover) et celle de derrière!
Une suggestion?
Merci

[awalter1]

une autre possibilité est que l'image du hover prenne la même taille que celle de départ...

[NoSmoking]

une autre possibilité est que l'image du hover prenne la même taille que celle de départ...

Mauvaise idée, toujours faire au plus simple si possible ...

J'ai essayé d'ajouter :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.overlay-image:hover .image {
    opacity: 0;
}

...
mais ça fait disparaitre l'image de devant (hover) et celle de derrière!

c'est ce que tu demande via le sélecteur utilisé.
Il te faut cibler la première image et aucune autre donc

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.overlay-image:hover > img {
  opacity: 0;
}