5546 sujets

Sémantique web et HTML

[Résolu] Améliorer un code zoom au survol image pour IE

Bonjour,
J'ai un code qui correspond parfaitement à ce que je cherche à faire c'est à dire une galerie d'image et un zoom (sans décalage) au survol de la souris, mais s'il fonctionne parfaitement sous Mozilla, rien à faire sous IE...

Voici mon code :


<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">

.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}

.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}

</style>
<body>
<div class="hovergallery">
<img src="antoine_fargette.jpg" />
<img src="antoine_fargette.jpg" />
<img src="antoine_fargette.jpg" />
<img src="antoine_fargette.jpg" />
<img src="antoine_fargette.jpg" />
<img src="antoine_fargette.jpg" />
<img src="antoine_fargette.jpg" />
<img src="antoine_fargette.jpg" />
</div>
</body>
</html>

Avez-vous une idée pour faire fonctionner ce code sous IE ?...

ça donne cela sous Mozilla :

PATPIERRE upload/63385-imagezoom.JPG

Merci aux bonnes âmes...
Modérateur
Bonjour, des problèmes de préfixe vendeurs. Tu utilises des prefixes inutiles et oublies la version sans prefixe (la plus importante!).

Par exemple

.hovergallery img{
  transform: scale(0.8); /** fonctionne sur tous les navigateurs modernes **/
}


Pour choisir judicieusement, il faut consuter de sites comme caniuse ou utiliser un système automatique comme autoprefixer
Un grand merci pour cette réponse kustolovic, mais serait-il possible de me réécrire le code css avec cette modif...
Merci quand même
Personnellement, c'est avec plaisir et honneur que je renseignerait totalement les personnes qui me demanderaient de l'aide. c'est d'ailleurs ce que je fais gratuitement sur mon site.
Ce n'est pas la première fois que je vais sur ce forum et que je me fais renvoyer à mes études...
Sujet clos
Aller à