[Résolu] Problème effet zoom sur image

Je viens de régler un souci zoom et marquée. Maintenant un autre problème se pose à moi.
Je souhaiterai, si c'est possible éviter que tout le contenu de mon site bouge au zoom image.
Est il possible que l'image passe au dessus de tout le reste lorsque la souris passe sur l'image.
http://safptlocal83130.free.fr/
Je me suis dt en insérant un tableau, ça résoudrait... mais non en fait.
SI quelqu'un a une idée, pour ne pas mettre le code entier de la page, dites moi quelle partie je dois insérer ici.
merci

Bonsoir,

Peux-tu nous mettre ton code sur https://codepen.io/pen/ .

Merci

bonjour, oui il est vieillot, il y aurait sûrement des améliorations à faire. Mais bon voilà, je suis restreint dans les techniques de codage.
Pour l'heure ce qui ne me plait pas c'est lorsque le zoom se fait, toute la page bouge J'avais trouver un code ( highslide ) mais après, ça me génère d'autres problèmes
La partie du code qui me gène:

<marquee behavior="scroll" direction="vertical" width="100%" scrollamount="5" scrolldelay="100" loop="0" onmouseover="this.stop()" onmouseout="this.start()">
<p>
<img src="photos/la%20garde%201%20bis.jpg" onmouseover="this.src='photos/la%20garde%201.jpg'" onmouseout="this.src='photos/la%20garde%201%20bis.jpg'" />
<img src="photos/la%20garde%202%20bis.jpg" onmouseover="this.src='photos/la%20garde%202.jpg'" onmouseout="this.src='photos/la%20garde%202%20bis.jpg'" />
<img src="photos/la%20garde%204%20bis.jpg" onmouseover="this.src='photos/la%20garde%204.jpg'" onmouseout="this.src='photos/la%20garde%204%20bis.jpg'" />
<img src="photos/la%20garde%205%20bis.jpg" onmouseover="this.src='photos/la%20garde%205.jpg'" onmouseout="this.src='photos/la%20garde%205%20bis.jpg'" />
<img src="photos/la%20garde%206%20bis.jpg" onmouseover="this.src='photos/la%20garde%206.jpg'" onmouseout="this.src='photos/la%20garde%206%20bis.jpg'" />
<img src="photos/la%20garde%207%20bis.jpg" onmouseover="this.src='photos/la%20garde%207.jpg'" onmouseout="this.src='photos/la%20garde%207%20bis.jpg'" />
<img src="photos/la%20garde%208%20bis.jpg" onmouseover="this.src='photos/la%20garde%208.jpg'" onmouseout="this.src='photos/la%20garde%208%20bis.jpg'" />
<img src="photos/la%20garde%209%20bis.jpg" onmouseover="this.src='photos/la%20garde%209.jpg'" onmouseout="this.src='photos/la%20garde%209%20bis.jpg'" />
<img src="photos/la%20garde%2010%20bis.jpg" onmouseover="this.src='photos/la%20garde%2010.jpg'" onmouseout="this.src='photos/la%20garde%2010%20bis.jpg'" />
<img src="photos/la%20garde%2011%20bis.jpg" onmouseover="this.src='photos/la%20garde%2011.jpg'" onmouseout="this.src='photos/la%20garde%2011%20bis.jpg'" />
<img src="photos/la%20garde%2012%20bis.jpg" onmouseover="this.src='photos/la%20garde%2012.jpg'" onmouseout="this.src='photos/la%20garde%2012%20bis.jpg'" />
<img src="photos/la%20garde%2013%20bis.jpg" onmouseover="this.src='photos/la%20garde%2013.jpg'" onmouseout="this.src='photos/la%20garde%2013%20bis.jpg'" />
<img src="photos/la%20garde%2014%20bis.jpg" onmouseover="this.src='photos/la%20garde%2014.jpg'" onmouseout="this.src='photos/la%20garde%2014%20bis.jpg'" />
<img src="photos/la%20garde%2015%20bis.jpg" onmouseover="this.src='photos/la%20garde%2015.jpg'" onmouseout="this.src='photos/la%20garde%2015%20bis.jpg'" />
<img src="photos/la%20garde%2016%20bis.jpg" onmouseover="this.src='photos/la%20garde%2016.jpg'" onmouseout="this.src='photos/la%20garde%2016%20bis.jpg'" />
<img src="photos/la%20garde%2017%20bis.jpg" onmouseover="this.src='photos/la%20garde%2017.jpg'" onmouseout="this.src='photos/la%20garde%2017%20bis.jpg'" />
<img src="photos/la%20garde%2018%20bis.jpg" onmouseover="this.src='photos/la%20garde%2018.jpg'" onmouseout="this.src='photos/la%20garde%2018%20bis.jpg'" />
<img src="photos/la%20garde%2019%20bis.jpg" onmouseover="this.src='photos/la%20garde%2019.jpg'" onmouseout="this.src='photos/la%20garde%2019%20bis.jpg'" />
<img src="photos/la%20garde%2021%20bis.jpg" onmouseover="this.src='photos/la%20garde%2021.jpg'" onmouseout="this.src='photos/la%20garde%2021%20bis.jpg'" />
<img src="photos/la%20garde%2022%20bis.jpg" onmouseover="this.src='photos/la%20garde%2022.jpg'" onmouseout="this.src='photos/la%20garde%2022%20bis.jpg'" />
<img src="photos/la%20garde%2023%20bis.jpg" onmouseover="this.src='photos/la%20garde%2023.jpg'" onmouseout="this.src='photos/la%20garde%2023%20bis.jpg'" />
<p></p></marquee>

J'aurai aimé que le reste ne bouge pas ( décalage dés que la souris passe dessus)
merci

Jean-Pierre-Bruneau a écrit :
Oui je comprends très bien,Personnellement je testerait si mon site (sans rien changer) supporterait le HTML5.
Mets ceci et testes.(supprime ce qui correspond dans ta version actuelle)

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->

Donc:
Ce déplacement est très gênant alors crées un div display none 'pas hide !!! mais display et crées toi un minuscule javascript qui à une deux fonctions voir(limg) et cacher (limg) ce div est bloqué en top 0 et Left 0
si tu veux de l'aide dis le

le code a été modifié, maintenant des ? à la place des minuscules avec accent!
En ce qui concerne créer un div display none' c'est là que....... D'ou mon inscription en mode débutant.
Ce que tu me dis, me fait penser à mon menu, le survol, sans agrandissement, mais rien ne bouge, je me trompe?

je me suis permis, de faire autrement chose avec ce code, tu pourras me dire ce que tu en penses, les amateurs ou débutants ont parfois des idées un peu saugrenues.
(survol et non click)

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<style>
div.LePave { 
top=0;
left=0;
display="none";
width=100%;
height="auto";
}
</style>
</head><body>
<div id="LePave_hd" name="LePave_hd" class="LePave">
</div>
<script type="text/javascript">
function voir(xx)
{
document.getElementById('LePave_hd').innerHTML ="<img src='"+xx+"' onmouseout='voirfin();' />";    
document.getElementById('LePave_hd').style.display="block";
}
function voirfin()
{
document.getElementById('LePave_hd').style.display="none";
}
</script>
<marquee behavior="scroll" direction="vertical" width="100%" scrollamount="5" scrolldelay="100" loop="0" onmouseover="this.stop()" onmouseout="this.start()">
<p>
<img src="photos/la%20garde%201%20bis.jpg" onmouseover="voir('photos/la%20garde%201.jpg');return false "  />
<img src="photos/la%20garde%202%20bis.jpg" onmouseover="voir('photos/la%20garde%202.jpg');return false "  />
<img src="photos/la%20garde%203%20bis.jpg" onmouseover="voir('photos/la%20garde%203.jpg');return false "  />
<img src="photos/la%20garde%204%20bis.jpg" onmouseover="voir('photos/la%20garde%204.jpg');return false "  />
</p></marquee>
</body></html>

Le fait que l'image apparaisse à l'opposer me plait bien. Rien que pour ça un grand merci
Ceci dit, ça décale le reste N'est pas possible que l'image agrandit, reste au dessus de tout le reste ? Comme si c'était un popup) ce serait donc un lien? je pense!

Je pense avoir trouvé quelque chose de plus rapprochant pour éviter cet effet visuel pas top

<div class=zoom>
 <div class=image>
 <img src="photos/la garde 1 bis.jpg" width="120" height="79" alt=""/>
 </div>
</div>

@charset "utf-8";
.zoom {
width: 400px;
height: 280px;
}
.image {
width: 200%;
height: 200%;
}
.image img {
/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
-webkit-transition: all 1s ease; /* Safari et Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* Internet Explorer 9 */
-o-transition: all 1s ease; /* Opera */
-e-transition: all 1s ease; /* Edge */
}
.image:hover img {
/* L'image est grossie de 25% */
-webkit-transform:scale(2); /* Safari et Chrome */
-moz-transform:scale(2); /* Firefox */
-ms-transform:scale(2); /* Internet Explorer 9 */
-o-transform:scale(2); /* Opera */
-e-transform:scale(2); /* Edge */
}

Seul bémol, l'image agrandie est un peu... Je vais encore chercher....
Dites moi!
merci

Jean-Pierre-Bruneau a écrit :

?

Jean-Pierre-Bruneau a écrit :
Oui je comprends très bien,Personnellement je testerait si mon site (sans rien changer) supporterait le HTML5.
Mets ceci et testes.(supprime ce qui correspond dans ta version actuelle)

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->

Donc:
Ce déplacement est très gênant alors crées un div display none 'pas hide !!! mais display et crées toi un minuscule javascript qui à une deux fonctions voir(limg) et cacher (limg) ce div est bloqué en top 0 et Left 0
si tu veux de l'aide dis le

Après mur réflexion un effet zoom serait le plus approprié.

Je serai donc d'avis de faire ceci:

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<link href="test css.css" rel="stylesheet" type="text/css">
</head>
<body>
<marquee behavior="scroll" direction="vertical" width="100%" scrollamount="5" scrolldelay="100" loop="0" onmouseover="this.stop()" onmouseout="this.start()">
<p>
<div class="zoom">
<img src="file:///F:/safpt/photos/la%20garde1bis.jpg" width="200" height="133"> 
<img src="file:///F:/safpt/photos/la%20garde2bis.jpg" width="200" height="133">
<img src="file:///F:/safpt/photos/la%20garde3bis.jpg" width="200" height="133"> 
<img src="file:///F:/safpt/photos/la%20garde4bis.jpg" width="200" height="133">
</div>
</div>
</p></marquee>
</body>
</html>

charset="UTF-8">
.zoom {
width: 250px;
height: 170px;
}
.image {
width: 100%;
height: 100%;
}
.zoom img {
-webkit-transition: all 1s ease; /* Safari et Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* Internet Explorer 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.zoom img:hover {
-webkit-transform:scale(1.25); /* Safari et Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* Internet Explorer 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}

Je viens de tester, ça m'a l'air d'être bon.
merci de me corriger si je fais fausse route

Bon j'ai opté pour cette dernière solution.
Merci

olivier83 a écrit :

Après mur réflexion un effet zoom serait le plus approprié.

Je serai donc d'avis de faire ceci:

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<link href="test css.css" rel="stylesheet" type="text/css">
</head>
<body>
<marquee behavior="scroll" direction="vertical" width="100%" scrollamount="5" scrolldelay="100" loop="0" onmouseover="this.stop()" onmouseout="this.start()">
<p>
<div class="zoom">
<img src="file:///F:/safpt/photos/la%20garde1bis.jpg" width="200" height="133"> 
<img src="file:///F:/safpt/photos/la%20garde2bis.jpg" width="200" height="133">
<img src="file:///F:/safpt/photos/la%20garde3bis.jpg" width="200" height="133">
<img src="file:///F:/safpt/photos/la%20garde4bis.jpg" width="200" height="133">
</div>
</div>
</p></marquee>
</body>
</html>

charset="UTF-8">
.zoom {
width: 250px;
height: 170px;
}
.image {
width: 100%;
height: 100%;
}
.zoom img {
-webkit-transition: all 1s ease; /* Safari et Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* Internet Explorer 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.zoom img:hover {
-webkit-transform:scale(1.25); /* Safari et Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* Internet Explorer 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}

Je viens de tester, ça m'a l'air d'être bon.
merci de me corriger si je fais fausse route https://applinked.me

This one is good. Thanks for the reply
Modifié par walton19 (10 Aug 2021 - 07:31)