Besoin d'aide pour améliorer un code zoom sur image

**ROMAIN4** · 29/11/2016, 21h07

Bonjour,
Je cherche à améliorer un code qui permet de zoomer sur une image dans une galerie avec un lien vers le site correspondant. ça marche mais mon problème, c'est que je souhaite qu'au zoom les autres images restent fixent en arrière plan. Je bute là-dessus.
Voici le 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
37
38
39
40
41
42
43
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<style type="text/css">
 
<!-- 
.zoom {
height:400px;
margin:auto;
}
.zoom p {
text-align:center;
}
.zoom img {
width:232px;
height:275px;
}
.zoom img:hover {
width:250px;
height:296px;
}
 
-->
</style>
</head>
 
<body>
<div class="zoom">
<center>
 
<span Title="PIERRES-INFO"><a href="http://www.pierres-info.fr/accueil/index.html"><img src="antoine_fargette.jpg"></a></span>
<span Title="PIERRES-INFO"><a href="http://www.pierres-info.fr/accueil/index.html"><img src="antoine_fargette.jpg"></a></span>
<span Title="PIERRES-INFO"><a href="http://www.pierres-info.fr/accueil/index.html"><img src="antoine_fargette.jpg"></a></span>
<span Title="PIERRES-INFO"><a href="http://www.pierres-info.fr/accueil/index.html"><img src="antoine_fargette.jpg"></a></span><br>
<span Title="PIERRES-INFO"><a href="http://www.pierres-info.fr/accueil/index.html"><img src="antoine_fargette.jpg"></a></span>
<span Title="PIERRES-INFO"><a href="http://www.pierres-info.fr/accueil/index.html"><img src="antoine_fargette.jpg"></a></span>
<span Title="PIERRES-INFO"><a href="http://www.pierres-info.fr/accueil/index.html"><img src="antoine_fargette.jpg"></a></span>
<span Title="PIERRES-INFO"><a href="http://www.pierres-info.fr/accueil/index.html"><img src="antoine_fargette.jpg"></a></span>
</center>
</div>
</body>
</html

Ce que ça donne actuellement en image (décalages) : Nom : Capturer.JPG
Affichages : 183
Taille : 73,1 Ko

Merci pour votre aide
ROMAIN

**ROMAIN4** · 30/11/2016, 14h11

Bon,
Mon affaire n'a pas l'air de passionner les foules...
Alors j'ai cherché comme un grand et j'ai modifié mon code; seul problème qui paraît récurent mais dont je n'ai pas encore trouvé la solution malgré mes recherches et une bonne prise de tête, c'est comment centrer mes images dans le bloc...
Voici le code (j'ai laissé volontairement le cadre du bloc visible pour voir le problème de centrage) :

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
55
56
57
58
59
60
61
62
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<style type="text/css">
.conteneur_images
{
background:;
border: 1px ridge violet;
height: 176px;
margin-left: 5%;
margin-right: 5%;
width: auto;
}
 
.image
{ 
float: left;
width: 140px;
height: 166px;
margin: 5px;
}
 
img#zoom
{
height: 100%;
width: 100%;
}
 
img#zoom:hover
{
background:#fef9e7;
height:150%;
left:-10px;
padding: 2px;
position: relative;
top: -60px;
width: 200%;
box-shadow:
5px 5px 7px #f9e79f;
}</style>
</head>
 
<body>
<div class="conteneur_images">
<div class="image" id="image"><a href="http://www.pierres-info.fr/accueil/index.html"><img id="zoom" src="antoine_fargette.jpg" title="ANTOINE FARGETTE" alt="Mon Chat photo 2"></a></div>
<div class="image" id="image"><a href="http://www.pierres-info.fr/accueil/index.html"><img id="zoom" src="antoine_fargette.jpg" title="ANTOINE FARGETTE" alt="Mon Chat photo 2"></a></div>
<div class="image" id="image"><a href="http://www.pierres-info.fr/accueil/index.html"><img id="zoom" src="antoine_fargette.jpg" title="ANTOINE FARGETTE" alt="Mon Chat photo 2"></a></div>
<div class="image" id="image"><a href="http://www.pierres-info.fr/accueil/index.html"><img id="zoom" src="antoine_fargette.jpg" title="ANTOINE FARGETTE" alt="Mon Chat photo 2"></a></div>
<div class="image" id="image"><a href="http://www.pierres-info.fr/accueil/index.html"><img id="zoom" src="antoine_fargette.jpg" title="ANTOINE FARGETTE" alt="Mon Chat photo 2"></a></div>
<div class="image" id="image"><a href="http://www.pierres-info.fr/accueil/index.html"><img id="zoom" src="antoine_fargette.jpg" title="ANTOINE FARGETTE" alt="Mon Chat photo 2"></a></div></div>
<div class="conteneur_images">
<div class="image" id="image"><a href="http://www.pierres-info.fr/accueil/index.html"><img id="zoom" src="antoine_fargette.jpg" title="ANTOINE FARGETTE" alt="Mon Chat photo 2"></a></div>
<div class="image" id="image"><a href="http://www.pierres-info.fr/accueil/index.html"><img id="zoom" src="antoine_fargette.jpg" title="ANTOINE FARGETTE" alt="Mon Chat photo 2"></a></div>
<div class="image" id="image"><a href="http://www.pierres-info.fr/accueil/index.html"><img id="zoom" src="antoine_fargette.jpg" title="ANTOINE FARGETTE" alt="Mon Chat photo 2"></a></div>
<div class="image" id="image"><a href="http://www.pierres-info.fr/accueil/index.html"><img id="zoom" src="antoine_fargette.jpg" title="ANTOINE FARGETTE" alt="Mon Chat photo 2"></a></div>
<div class="image" id="image"><a href="http://www.pierres-info.fr/accueil/index.html"><img id="zoom" src="antoine_fargette.jpg" title="ANTOINE FARGETTE" alt="Mon Chat photo 2"></a></div>
<div class="image" id="image"><a href="http://www.pierres-info.fr/accueil/index.html"><img id="zoom" src="antoine_fargette.jpg" title="ANTOINE FARGETTE" alt="Mon Chat photo 2"></a></div>
</div><br>
</div>		
</body>
</html>

Et en image : Nom : Capturer.JPG
Affichages : 150
Taille : 62,4 Ko

Merci pour votre aide, si ti plait missieu
ROMAIN

Invité · 30/11/2016, 16h27

Bonjour,

un effet sympa :

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
30
31
32
33
34
.conteneur_images {
  margin: 5px;
  width: auto;
}
 
.image {
  float: left;
  width: 140px;
  height: 140px;
  margin: 5px;
  overflow: hidden;
}
.image:hover {
  overflow: visible;
}
img#zoom {
  min-width: 100%;
  min-height: 100%;
  max-width: 200px;
  max-height: 200px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
 
img#zoom:hover {
  box-shadow: 5px 5px 7px #333;
  -webkit-transform: scale(1.5) rotate(-3deg);
  -moz-transform: scale(1.5) rotate(-3deg);
  -o-transform: scale(1.5) rotate(-3deg);
  transform: scale(1.5) rotate(-3deg);
}

**ROMAIN4** · 30/11/2016, 16h57

Merci
Effectivement très chouette, j'achète...
Mais mes images ne sont toujours pas centrées dans le container, barnacle !...

Invité · 30/11/2016, 17h25

Comme ça alors : http://codepen.io/jreaux62/pen/ObOZKM

J'ai aussi modifié le HTML (car un id est TOUJOURS unique, et ici, on n'en a pas besoin !) :

Code html :

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
<div class="conteneur_images">
  <figure>
    <a href="#"><img src="http://www.gettyimages.fr/gi-resources/images/Embed/new/embed2.jpg" alt=""></a>
  </figure>
  <figure>
    <a href="#"><img src="http://french.xinhuanet.com/titlepic/135151130_1456974222920_title1n.jpg" alt=""></a>
  </figure>
  <figure>
    <a href="#"><img src="http://www.gettyimages.com/gi-resources/images/Olympics/Rio2016OlympicHub/olympichair_GettyImages-591810506.jpg" alt=""></a>
  </figure>
  <figure>
    <a href="#"><img src="http://www.developpez.net/forums/avatars/256045-jreaux62.gif?dateline=1475568296" alt=""></a>
  </figure>
  <figure>
    <a href="#"><img src="https://twistedsifter.files.wordpress.com/2016/03/popular-images-with-a-twist-by-tony-futura-13.jpg" alt=""></a>
  </figure>
  <figure>
    <a href="#"><img src="https://cdn.pixabay.com/photo/2016/07/30/13/16/dandelion-1557110_960_720.jpg" alt=""></a>
  </figure>
  <figure>
    <a href="#"><img src="http://www.developpez.net/forums/avatars/256045-jreaux62.gif?dateline=1475568296" alt=""></a>
  </figure>
  <figure>
    <a href="#"><img src="http://www.forumdesimages.fr/media/cache/fdi_big_overview/media/fdi/35786-prog-stuart-little-_-christophel-1.jpg" alt=""></a>
  </figure>
  <figure>
    <a href="#"><img src="http://www.developpez.net/forums/avatars/256045-jreaux62.gif?dateline=1475568296" alt=""></a>
  </figure>
  <figure>
    <a href="#"><img src="http://www.developpez.net/forums/avatars/256045-jreaux62.gif?dateline=1475568296" alt=""></a>
  </figure>
  <figure>
    <a href="#"><img src="http://www.developpez.net/forums/avatars/256045-jreaux62.gif?dateline=1475568296" alt=""></a>
  </figure>
  <figure>
    <a href="#"><img src="http://www.developpez.net/forums/avatars/256045-jreaux62.gif?dateline=1475568296" alt=""></a>
  </figure>
</div>

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
.conteneur_images {
  text-align: center;
  max-width: 960px;
  margin: 5px auto;
}
 
.conteneur_images figure {
  text-align: center;
  display: inline-block;
  width: 140px;
  height: 140px;
  margin: 5px;
  overflow: hidden;
  position: relative;
}
 
.conteneur_images figure:hover {
  overflow: visible;
}
 
.conteneur_images figure img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  max-width: 200px;
  max-height: 200px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
 
.conteneur_images figure img:hover {
  z-index: 2;
  box-shadow: 5px 5px 7px #333;
  -webkit-transform: scale(1.5) rotate(-3deg);
  -moz-transform: scale(1.5) rotate(-3deg);
  -o-transform: scale(1.5) rotate(-3deg);
  transform: scale(1.5) rotate(-3deg);
}

**ROMAIN4** · 30/11/2016, 17h52

C'est parfait centré et magnifique !...
Un grand merci, je vais pouvoir ranger l'aspirine dans l'armoire...

Besoin d'aide pour améliorer un code zoom sur image

CSS

Vue hybride

Discussions similaires

Partager

Partager