Zoom image en superposition

Version imprimable

31/10/2011, 12h50
Softarg

Zoom image en superposition
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:

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

Donne nous un exemple de code HTML stp.

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

Code:

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:

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.

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:

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.

31/10/2011, 15h12
Benjamin Delespierre

Citation:

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.

Citation:

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.
31/10/2011, 16h17
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:

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>';
31/10/2011, 17h03
NoSmoking
Bonjour, il existe
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.
31/10/2011, 18h34
Softarg

J'ai compris pour le code HTML, merci.
Je vais potasser les deux liens.
Merci amplement.