Zoomer une image avec les CSS

**scoubi77** · 23/12/2011, 21h52

Bonsoir à toutes et à tous,

J'ai besoin de zoomer des images au passage de la souris et le j'ai des soucis
j'ai en css ce code :

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
img {border: 0}
 
.thumb {
	display:block;
	margin:1px;
	width:135px;
	height:99px; 
	background-color:#D3D3D3;
	float:left;  
	} 
.thumb a {
display:block; 
} 
.thumb a:hover {
	position:absolute;	
	}
body>.thumb a:hover {	  /*hack pour permettre le rollover de gauche à droite avec mozilla*/
	position:relative;	 
	}	
 
.thumb a img { 
	margin:0;
	padding:0;
	width:135px;
	height:99px; 
	}
 
.thumb a:hover img {
	position:relative;
	left:0px;
	top:80px;
	width:500px;
	height:399px;  
	} 
 
	-->

et en html ce code:

Code :

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

1
2
3
4
 <div style="text-align:center"><div class="thumb"><a href="#"><img src="image/Constellation du Taureaup.jpg "  TITLE="Constellation du Taureau"/></A></div>
&nbsp;div class="thumb"><a href="#"><img src="image/Constellation du Cygnep.jpg"  TITLE="Constellation du Cygne"/></A></div>
&nbsp;<div class="thumb"><a href="#"><img src="image/Galaxie M33p.jpg" TITLE="Galaxie M33"/></A></div>
&nbsp;<div class="thumb"><a href="#"><img src="image/La grande Oursep.jpg" TITLE="La grande Ourse"/></A></div></DIV>

je recontre deux soucis, le premier vient du fait que je n'arrive pas a centrer mes quatre images sur la ligne, ça tire sur la gauche malgrès <div style="text-align:center">!!!

mon deuxième soucis est que j'ai en dessous une autre serie de quatre images et je n'arrive pas à répéter l'opération sur l'autre ligne !!! malgrès l'ouverture d'une balise div et sa fermeture sur la ligne, et l'ouverture d'une autre div sur la deuxième ligne

merci par avance pour votre aide

amicalement

scoubi77

**betadev** · 24/12/2011, 16h13

Bonjour,

Pour résoudre le problème , il faut bien utiliser les tableaux au lieu des div , ou bien fixer le width et le margin à auto (du div mère) , regarde l'exemple.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<style type="text/css">
img {border: 0}
 
.thumb {
	display:block;
	margin:1px;
	width:135px;
	height:99px; 
	background-color:#D3D3D3;
	float:left;  
	} 
.thumb a {
display:block; 
} 
.thumb a:hover {
	position:absolute;	
	}
body>.thumb a:hover {	  /*hack pour permettre le rollover de gauche à droite avec mozilla*/
	position:relative;	 
	}	
 
.thumb a img { 
	margin:0;
	padding:0;
	width:135px;
	height:99px; 
	}
 
.thumb a:hover img {
	position:relative;
	left:0px;
	top:80px;
	width:500px;
	height:399px;  
	} 
 
	-->
</style>
</head>
 
<body>
 
	 <div style="text-align:center; width:560px; margin:auto;"><div class="thumb"><a href="#"><img src="image/Constellation du Taureaup.jpg "  TITLE="Constellation du Taureau"/></A></div>
<div class="thumb"><a href="#"><img src="image/Constellation du Cygnep.jpg"  TITLE="Constellation du Cygne"/></A></div>
*<div class="thumb"><a href="#"><img src="image/Galaxie M33p.jpg" TITLE="Galaxie M33"/></A></div>
&nbsp;<div class="thumb"><a href="#"><img src="image/La grande Oursep.jpg" TITLE="La grande Ourse"/></A></div></DIV>
 
</body>
</html>

**scoubi77** · 25/12/2011, 18h03

Un grand merci pour cette réponse,
Je vais essayer cela dès ce soir.
Encore merci
Amicalement scoubi77

**scoubi77** · 25/12/2011, 21h18

Bonsoir,

après tests j'ai un problème resistant, mon début de text " au " est sur la ligne de mes photos alors que j'ai à la suite de la fermeture de </div>

Code :

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

1
2
<BR>
         <p>Au printemps : Le Lion ; Le Cancer ; La Vierge ; Le Corbeau ; L'Ydre ; Le Bouvier</p>

une autrre astuce ?

En deuxième lieu je voudrais que la première serie de photo l'image s'agrandisse en haut de la vignette et non en bas il faut que je modifie quoi dans le code css pour cela

amicalement scoubi 77

**scoubi77** · 25/12/2011, 22h46

Re bonsoir,

Pourma deuxième question j'ai trouvé réponse en tatonant

Code :

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

1
2
3
4
5
6
7
8
9
.thumb a:hover img {
	position:relative;
	left:0px;
	bottom:400px;
	width:500px;
	height:399px;  
	} 
 
	-->

j'ai remplacé top par botton est j'ai augmenté de 80 a 400 px

par contre je ne trouve pas pour :

après tests j'ai un problème resistant, mon début de text " au " est sur la ligne de mes photos alors que j'ai à la suite de la fermeture de </div>

Code :

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

1
2
3
 
 
         <p>Au printemps : Le Lion ; Le Cancer ; La Vierge ; Le Corbeau ; L'Ydre ; Le Bouvier</p>

une autrre astuce ?

amicalement scoubi77

**scoubi77** · 25/12/2011, 23h22

j'ai trouvé !!!!
après le DIV, jai ajouté

Code :

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

1
2
3
 <div style="text-align:center; width:560px; margin:auto;"><div class="thumb2"><a href="#"><img src="image/Eclipse totale de Lunep.jpg"   TITLE="Eclipse totale de Lune"/></A></div><div class="thumb2"><a href="#"><img src="image/La pleine lune au t-l-objectifp.jpg" TITLE="La pleine lune au t-l-objectif"></A></div><div class="thumb2"><a href="#"><img src="image/La plan-te Jupiterp.jpg" TITLE="La plante jupiter"></A></div><div class="thumb2"><a href="#"><img src="image/Eclipse totale de Soleilp.jpg" TITLE="Eclipse totale de Soleil"></A></div></DIV> 
    <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
         <p>Au printemps : Le Lion ; Le Cancer ; La Vierge ; Le Corbeau ; L'Ydre ; Le Bouvier</p>

une idée du pourquoi du comment !!!

Zoomer une image avec les CSS

CSS

Discussions similaires

Partager

Partager