Discussion :

[Softarg]

Bonjour,

Je cherche à faire un zoom sur une photo au passage de la souris avec les css.
Mais je veux que cette photo s'agrandisse en superposition.
C'est à dire qu'elle ne décale pas tout ce qui l'entoure.
Comment puis-je faire. Je n'y arrive pas.


Voici le css :

Code :

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

1
2
3
4
5
6
.zoom img {
width:50px;
}
.zoom img:hover {
width:400px;
}

Merci d'avance.

[Benjamin Delespierre]

Donne nous un exemple de code HTML stp.

La solution la plus simple à ton problème est de faire comme suit:

Code :

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

1
2
3
4
5
<div class="image-group">
<div class="image-cell"><img src="img1.jpg" /></div>
<div class="image-cell"><img src="img2.jpg" /></div>
<div class="image-cell"><img src="img3.jpg" /></div>
</div>

Et jouer sur les propriété de padding pour grossir ou non un image:

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
 
.image-group > .image-cell {
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  padding: 5px;
}
 
.image-group > .image-cell img {
  width: 100px;
  height: 100px;
}
 
.image-group > .image-cell:hover {
  width: 105px;
  height: 105px;
  padding: 0px;
}
 
.image-group > .image-cell:hover img {
  width: 105px;
  height: 105px;
}

Pense à mettre un bloc qui porte la propriété clear:both derrière le bloc image-group.

[Softarg]

Le problème c'est que l'image est codée dans du php.

Voici ce que j'ai codé, l'image concernée est en ligne 13 :

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
while($ligne_donnees = mysql_fetch_assoc($resultat)){
 
	echo '<tr>';
 
	if (isset($_POST['code'])) {
		echo '<td style="color:#ffffff" bgcolor="#003399"><center>' . $ligne_donnees['code'] . '</center></td>';
			}else{
 
				echo '<td style="color:#ffffff" bgcolor="#66cc66"><center>' . 'ce code produit n\'existe pas' . '</center></td>';
				echo '<td align="center">' . $ligne_donnees['nom_ref'] . '</td>';
 
				echo "<div class='zoom'>";
					echo '<td align="center" class="zoom"><img src="' . $ligne_donnees['photo_mail'] . '"alt="Image en Print">' . '</td>';
				echo "</div>";
 
		echo '</tr>';

Donc c'est pour cela que je bloque.
Merci d'avance.

[Benjamin Delespierre]

Le problème c'est que l'image est codée dans du php.

Qu'est ce que ça change ? Tu produis bien un flux HTML, c'est ça qui nous intéresse, pas le code PHP.

Donc c'est pour cela que je bloque.

Je ne vois pas le lien de cause à effet, de plus je viens de te donner une solution possible.

[Softarg]

Je bloque car je ne suis pas très forte.
Voici ce que j'ai codé.
Donc ca ne marche pas, la photo est affichée à son format d'origine.

Voici ce que j'ai codé suite aux infos données :

Code :

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

1
2
3
echo '<div class="image-group">';
	echo '<td align="center" class="image-cell"><img src="' . $ligne_donnees['photo_mail'] . '"alt="Image en Print">' . '</td>';
echo '</div>';

[NoSmoking]

Bonjour, il existe

• http://plambert.developpez.com/tutor...et-zoom-image/
• http://cssglobe.developpez.com/tutor...mensionnables/
• ...etc..

ce qui nous intéresse c'est le code HTML généré par le PHP, une fois la page affichée -> click droit -> code source de la page, souvent CTRL + U fonctionne.