Adapter l'image zoomer en fonction de sa forme [Résolu]

[nanard74]

Bonjour,
j'ai un petit soucis avec une galerie image pour un site, j'ai mis des vignettes et quand on les survolent l'image zoomer apparait, c'est bien mais si elle est en hauteur (l'image) elle est déformée, moins bien.
voir l'exemple ici
je joins les codes html et 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
83
84
85
86
87
88
89
90
91
92
93
#container {
	position:absolute;
	left:70px;
	top:211px;
	width:923px;
	height:678px;
	z-index:6;
}
#situation {
	position:absolute;
	left:1px;
	top:0px;
	width:246px;
	height:20px;
	z-index:4;
}
.Style4 {
	font-size: 12px;
	color: #0066CC;
	}
#titre_gal{
position:absolute;
left:324px;
top:13px;
width:345px;
height:31px;
z-index:4;
}
.style1{
font-size:36px;
color:#0066CC;
text-shadow:0.1em 0.2em 0.2em silver;
-webkit-text-shadow: 0.1px 0.2px 0.2px silver;
 -moz-text-shadow : 0.1px 0.2px 0.22px slver;
  }
#contenugalerie {
	position:absolute;
	left:4px;
	top:58px;
	width:914px;
	height:604px;
	z-index:4;
	}
.lien{
text-decoration:none;
border:0px;
}		
#fieldest{
	position:absolute;
	left:81px;
	top: 7px;
	height:220px;
	width: 725px;
	z-index:5;
}body {
background-color: #FFFFFF;
color:white;
height:500px;
}
img {
border:0px;
}
.thumb {
position:relative;
top:0;
left:0;
}
}
.thumb a {
margin:0;
text-decoration:none;
}
.thumb a:hover {
background-color: #FFFFFF;
}
.thumb a .grand {
	display:block;
	position: absolute;
	width:0;
	top: 9px;
	left: 124px;
}
.thumb a:hover .grand {
position:absolute;
top:120px;
left:0;
width:400px;
height:250px;
}
.lien:hover .grand{
text-decoration:none;
border:2px black;
}

Code :

1
2
3
4
5
6
7
8
<div id="contenugalerie">
		   <fieldset id="fieldest">
           <legend>La Villa</legend>
           <div class="thumb">
		    <a href="#" class="lien"> 
<img class="lien" src="http://d.b.laroche.free.fr/vigne_1/photo1.jpg" alt="" /><img src="http://d.b.laroche.free.fr/vigne_1/image1.jpg" class="grand" alt=""/></a> 
<a href="#" class="lien"> <img class="lien" src="http://d.b.laroche.free.fr/vigne_1/photo2.jpg" alt="" /> <img src="http://d.b.laroche.free.fr/vigne_1/image2.jpg" class="grand" alt=""/></a> 
<a href="#" class="lien"> <img class="lien" src="http://d.b.laroche.free.fr/vigne_1/photo3.jpg" alt="" /> <img src="http://d.b.laroche.free.fr/vigne_1/image3.jpg" class="grand" alt=""/></a>

si une personne peut m'éclairer , car je n'y arrive pas et trop débutant sur la chose. Par contre je ne comprend pas pourquoi il ne m'affiche pas la légende " la villa" sous Mozilla alors que sous IE elle s'affiche ?
merci d'avance pour vos réponses et bonne journée.
Bernard

[Emyleen]

Code css :

1
2
3
4
5
6
7
.thumb a:hover .grand {
position:absolute;
top:120px;
left:0;
width:400px;
height:250px;
}

Enlève ou modifie le width et le height de cette partie du css, essaye width:auto; et height: auto; par exemple. Après il te faudra peut-être faire 2 classes, une pour les images paysage et l'autre pour les images portrait.

Pour ta légende, tu ne lui as pas défini de couleur de police dans ton css, du coup elle prend la couleur du body, à savoir blanc.

[nanard74]

Bonsoir,
merci pour ta réponse très rapide et en plus cela marche bien et même pas besoin de faire 2 classes, il s'adapte très bien sur les 2 formes.
pour la légende j'ai essayé mais sans succès en lui mettant une classe et en css une couleur et taille, mais bon pas pour l’instant.
merci déja pour cela bonne soirée.
Bernard