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

[ddaweb]

Je ne suis pas assez fort en CSS, mais si tu essayais :

Code :

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

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

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

[awalter1]

non, ça ne fait rien!

[NoSmoking]

non, ça ne fait rien!

quelle belle réponse, à laquelle je répond si cela va le faire mais pas tout seul.

Je masque la première mais j'affiche bien sûr l'autre

Code :

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

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

ou quelque chose d'approchant !

[awalter1]

Trop fort : oui ça fonctionne
Cependant je ne comprends pas la symbolique du >
car lorsque je faisais

Code :

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

.overlay-image:hover .image {opacity: 0;}

Je ciblais bien la classe image. Là, tu cibles la classe générique img, non ? C'est quoi la différence?

Merci

[NoSmoking]

Si l'on considére le code HTML suivant :

Code html :

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

1
2
3
4
5
6
7
8
<div class="overlay-image">         <!-- noeud de référence -->
  <img class="image" src="...">     <!-- (1) -->
  <div class="normal">
  </div>
  <div class="hover">
    <img class="image" src="...">   <!-- (2) -->
  </div>
</div>

avec le sélecteur .overlay-image:hover .image :

• on cible (1) et (2) qui sont des éléments qui possèdent la class="image"

avec le sélecteur .overlay-image:hover img :

• on cible tous les éléments <img>, enfant direct ou non du noeud de référence, idem ci-dessus ^(*)

avec le sélecteur .overlay-image:hover > img :

• on cible seulement (1) qui est un élément <img> enfant direct du noeud de référence

^(*)la différence réside dans le calcul de la spécificité, le poids, du sélecteur, mais ceci est une autre histoire

Ressources :

• Sélecteur CSS
• Sélecteur de classe .nomclasse
• Sélecteurs d'enfant direct elemA > elemB

[awalter1]

merci beaucoupo, j'ai bien compris. En sus je n'avais pas vu que c'était la même classe image utilisée pour les deux <img ...