Centrer une image sur une autre image

Version imprimable

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:

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:

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

19/03/2023, 08h47
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:

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.
19/03/2023, 10h59
laurentSc

Citation:

Envoyé par NoSmoking

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 ?
19/03/2023, 11h38
awalter1

Merci NoSmoking, exactement ce qu'il fallait :bravo:
20/03/2023, 09h38
NoSmoking

Citation:

Envoyé par laurentSc

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

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:

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

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

20/03/2023, 14h16
awalter1

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

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

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

20/03/2023, 16h08
NoSmoking
Citation:

Envoyé par awalter1

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 ...
Citation:
Envoyé par awalter1

J'ai essayé d'ajouter :

Code:

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:

1 2 3 .overlay-image:hover > img { opacity: 0; }
20/03/2023, 16h36
awalter1

non, ça ne fait rien!
20/03/2023, 16h46
NoSmoking
Citation:

Envoyé par awalter1

non, ça ne fait rien!

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

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

1 2 3 .overlay-image:hover .hover { opacity: 1; }
ou quelque chose d'approchant !
20/03/2023, 17h02
awalter1

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

Code:

.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

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

1 2 3 4 5 6 7 8 <div class="overlay-image">  <img class="image" src="...">  <div class="normal"> </div> <div class="hover"> <img class="image" src="...">  </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

20/03/2023, 19h13
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 ...