Discussion :

[twisty]

bonjour,

Je voudrais centrer deux images (voire trois), côte à côte,mais séparées par un une balise DIV en html, du fait d'un zoom sur chaque image, au passage de la souris.

Voici mon code CSS :

Code CSS :

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
/* image 1 */
#img1 {
    float: left;    /* colle l'image à gauche */
    text-align: center ;    /* centre la 1ère image, et normalement image 2 y est collé à sa droite */
}
/* image 2 */
#img2 {
    float: left;    /* colle l'image à gauche et à droite de image 1 */
}
/* pour zoomer sur une image au passage de la souris */
.zoom div img {
    -webkit-transform: scale(1);   /* chrome, safari, android */
    -ms-transform: scale(1);      /*  internet explorer */
    -o-transform : scale(1);      /* opera */
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    -ms-transition: .3s ease-in-out;
    -o-transition:  .3s ease-in-out;
    transition: .3s ease-in-out;
}
/* pour dézoomer sur l'image non en contact avec la souris */
.zoom div:hover img {
    -webkit-transform: scale(1.3);   /* chrome, safari, android */
    -ms-transform: scale(1.3);      /*  internet explorer */
    -o-transform : scale(1.3);        /* opera */
    transform: scale(1.3);
}

en HTML :

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
<div class="zoom colonne">
                <div>
                        <div id="img1"><a href="http://www.img1.fr/"><img width="70"  height="70" 
                                src="img1.jpg"/></a></div>
                </div>
                <div>
                        <div id="img2"><a href="http://www.img2.fr"><img width="70" height="70" 
                               src="img2.png"/></a></div>
                </div>
 </div>

Note : tous les DIV sont nécessaires au zoomage et dézoomage des images. si on les retire, il n'est plus possible de zoomer au passage de la souris.

Problème :
- l'image 1 n'est pas centré (et donc l'image 2 non plus) (rien ne se passe avec text-align : center
- Et en mettant des balises <CENTER> et </CENTER> à l'extérieur des balises <img et /> , l'image 1 est centré mais l'image 2 passe à la ligne suivante (donc les images ne sont plus côte à côte).


Pourriez-vous m'aider ?


Merci d'avance.

[Invité]

Bonjour,

Supprime les floatval, et ajoute :

Code css :

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

1
2
.zoom { display:table; width:100%; }
.zoom div { display:table-cell; text-align:center; vertical-align:middle; }

N.B. la balise <center> est obsolète.

[twisty]

Bonjour,

Mon problème semble presque résolu, grâce à jreau 62. Mais entre les deux images, il y a un espace.

Pourriez-vous me communiquer le moyen d'enlever cet espace, afin que les deux images soient centrées et collées ?

Merci d'avance.

[Invité]

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.zoom { 
   display:table; 
   /*width:100%;*/  /* SUPPRIMER */
   margin:0 auto;  /* AJOUTER */
}
 
.zoom div img {
   display:block; /* AJOUTER */
...
}
.zoom div:hover img {
   z-index:1; /* AJOUTER */
...
}

[twisty]

Grâce jreaux 62,

Mes images sont centrées et collées, mais :

- j'ai, en fait, deux rangées d'images :
1ère rangée : deux images de longueur respective 178 et 128 (total : 306), et même hauteur de 70.
2ème rangée : trois images de longueur respective 104, 104 et 98 (total : 306), et même hauteur de 60.

problème :les deux rangées d'images sont centrées, mais elles ont un décalage vertical, à leurs deux extrêmités. Pourtant, elles sont de même longueur, soit 306.

Si c'était deux lignes, l'une en dessous de l'autre, elles seraient centrées, sans décalage de leurs extrêmités verticales.

Pourriez-vous m'aider à ce que les extrêmités verticales de ces rangées, soit bien alignées à la verticale ?

Merci d'avance.

[Invité]

Code css :

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
* {
  margin: 0;
  padding: 0;
}
.zoom {
  display: table;
  margin: 0 auto;
}
.zoom div {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.zoom div img {
  display: block;
  /* transition fluide */
  -webkit-transition: 0.3s ease-in-out;
  -ms-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.zoom div:hover img {
  z-index: 1;
  /* zoom sur une image au passage de la souris */
  -webkit-transform: scale(1.3); /* chrome, safari, android */
  -ms-transform: scale(1.3); /*  internet explorer */
  -o-transform: scale(1.3); /* opera */
  transform: scale(1.3);
}

[twisty]

Bonjour,

Je viens de constater que, en changeant de format mes images, soit de png en jpg, je n'ai plus de problème.

Et, je n'ai pas besoin de l'instruction :

Code :

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

1
2
3
4
* {
  margin: 0;
  padding: 0;
}

Par ailleurs , quand je supprime la ligne z-index: 1; , j'ai aussi le même résultat sans problème.

quelle est l'utilité de l'instruction z-index: 1; ?


Merci d'avance.

[Invité]

• z-index: 1; : l'image zoomée se place "au dessus" des autres.

Pour le reste... je n'ai que le code que tu me donnes pour répondre.

[twisty]

Bonsoir,

le problème est résolu. toutefois j'ai utilisé l'instruction position : relative; , pour que z-index : 1 ; fonctionne bien avec le navigateur google chrome.

Merci jreaux 62