> Tous les forums > Forum Forum des Webmasters
 CSS - Problème avec image et zoom
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
chester80
  Posté le 28/06/2017 @ 09:13 
Aller en bas de la page 
Petit astucien

Bonjour à tous

Quand je zoom mon image au passage de la souris, elle passe derrière mon design.

Comment puis je faire?

Merci pour votre aide

Lien vers une image externe

#container_broderie{

justify-content: center;

display: flex;

flex-wrap: wrap;

}

#enfants_broderie{

margin:5px;

background: url(test.png)no-repeat;

height : 200px;

width : 200px;

}

.haut{

text-align:center;

margin:0;

}

.centre1{

margin:15px 0 0 3px;

text-align:center;

}

.centre1 img:hover {

width:300px;

height:400px;

}

<div id="container_broderie">

<?php

$reponse = $bdd->query('SELECT * FROM broderies;');

while($result = $reponse->fetch()) {

?>

<div id="enfants_broderie">

<p class="haut">

<?php echo $result['broderie_numero'];?>

</p>

<p class="centre1">

<img src="http://babybroderie.fr/img/broderies/chat/<?php echo $result['broderie_numero'];?>.png" alt="yyy" />

</p>

</div>

<?php

}

?>

</div>

J'ai même essayer les z-index en relative ou absolu mais toujours pareil

#container_broderie{

justify-content: center;

display: flex;

flex-wrap: wrap;

}

#enfants_broderie{

margin:5px;

background: url(test.png)no-repeat;

height : 200px;

width : 200px;

position: absolute;

z-index: 1;

}

.haut{

text-align:center;

margin:0;

position: absolute;

z-index: 2;

}

.centre1{

margin:15px 0 0 3px;

text-align:center;

position: absolute;

z-index: 3;

}

.centre1 img:hover {

width:300px;

height:400px;

position: absolute;

z-index: 4;

}

Merci pour votre aide



Modifié par chester80 le 28/06/2017 09:16
Publicité
Dreamer
 Posté le 28/06/2017 à 18:18 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Salut

z-index devrait t'aider ...

chester80
 Posté le 28/06/2017 à 19:57 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien
Dreamer a écrit :

Salut

z-index devrait t'aider ...

Pourtant c'est ce que j'ai fait regarder mon code plus haut peur être ya des erreurs

cebe
 Posté le 29/06/2017 à 17:33 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Bonjour,

Ne faudrait-il pas plutôt placer z-index dans le corps de la page où se trouve ton image ?

Pour exemple, j'ai placé ceci dans le corps de mon menu afin qu'il soit toujours visible et au-dessus de tout le reste :

<div style="position:absolute;left:-55px;top:20px"; z-index:4;>

Ici tout ce qui a trait à la page...

</div>

Qu'en pensent les grands maîtres ?



Modifié par cebe le 29/06/2017 17:33
zoulouman
 Posté le 30/06/2017 à 20:19 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Salut tout le monde,

@Cebe, ton z-index est ignoré par les navigateurs, il n'est pas dans la définition style="..." mais après... C'est donc un attribut HTML de DIV qui n'a aucun sens.

Que ce soit dans la page ou dans une feuille de style externe à la page, ça ne change absolument rien.

@chester80

Tu pourrais nous mettre le HTML de la page où tu utilises ton CSS, SVP, ou mieux un lien ? Comment veux-tu qu'on sache ce que ta requête SQL va retourner ?

PHP/SQL pour un problème de CSS, c'est vraiment pas l'idéal. Il faut donner le HTML final, même si le contenu est dynamique, ce sera un exemple.

En plus, tu l'auras remarqué, ici rien n'est prévu pour afficher le code et rendre sa syntaxe lisible. Lire du code sur ce forum est un enfer. Pourtant il existe un JS très simple à mettre place sur ce site mais non.

Seconde chose, retire le z-index pour ton background #enfants_broderie, il ne sert absolument à rien, si ce n'est apporter de la confusion.

chester80
 Posté le 30/06/2017 à 20:37 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien
zoulouman
 Posté le 01/07/2017 à 09:14 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

C'est un fichier PHP. Je peux l'exécuter, c'est pas le souci, mais je n'ai pas les include et encore moins la base de données...

Du coup, j'ai trouvé l'adresse du site mais il est marqué en construction, ce qui m'empêche d'aller sur la page qui nous intéresse.

EDIT : Juste une chose.

Tu as essayé sans utiliser de z-index sur ton container flex ?

Théoriquement, la dernière image affichée le sera au dessus des autres. Ton hover devrait donc se placer au dessus.



Modifié par zoulouman le 01/07/2017 09:36
chester80
 Posté le 01/07/2017 à 12:46 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Je ne savais pas que tu voulais voir directement.

Tiens l'adresse : http://babybroderie.fr/broderies/broderies_pages.php?theme=Chat

Sinon je n'ai pas encore tester sans le -index dans le container je te tiens au courant

zoulouman
 Posté le 01/07/2017 à 19:07 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

C'est à s'arracher les cheveux ton truc.

Je crois que tu vas être obligé de passer par un JavaScript pour capturer les événements onmouseover et onmouseout. En CSS tu vas y laisser tes cheveux.

J'ai fait un essai avec cet exemple trouvé ici : https://www.w3schools.com/jsref/event_onmouseover.asp

Ca fonctionne correctement, mais il faut arranger ça pour que le grossissement de l'image ne décale pas tout le contenu du container.

Tu pourrais, par exemple, prévoir une zone de la page où s'afficherait l'image agrandie.

Publicité
BOB DE BRETAGNE
 Posté le 01/07/2017 à 22:05 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

les astuciens ....nes si çà peut convenir ?

c'est ma foi vrai qu'il n'est pas facile d'arriver à un résultat satisfaisant

la modif dans le css

.centre1{

text-align:center;

z-index: 1;

}

.centre1 img:hover {

margin-top: -230px;

margin-left: -100px;

width:300px;

height:400px;

z-index: 2;

}



Modifié par BOB DE BRETAGNE le 03/07/2017 19:37
chester80
 Posté le 02/07/2017 à 08:51 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Merci zoulouman de m'avoir aider.

Et merci Astucien d'avoir trouver une solution

Il faut donc rajouter

margin-top: -230px;

margin-left: -100px;

Si vous avez des explication pourquoi ce serai sympa

zoulouman
 Posté le 02/07/2017 à 10:42 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Salut,

Le margin négatif ne fait que décaler l'image vers le haut et la gauche. C'est pour limiter la "misère" lors du grossissement.

elle
 Posté le 03/07/2017 à 20:05 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

zoulouman a écrit :

Tu pourrais, par exemple, prévoir une zone de la page où s'afficherait l'image agrandie.

Personnellement, c'est ce que je ferais : beaucoup plus agréable à regarder quand on sait où l'image va s'afficher.

Et, tant qu'à offrir une image agrandie, aussi bien l'agrandir pour la peine!

Page : [1] 
Page 1 sur 1

Vous devez être connecté pour poster des messages. Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !


Sujets relatifs
Problème avec le panel d'un hébergeur d'image
Problème avec mon image cliquable
probleme affichage de l'image avec dreamweaver cs3
probleme avec image html
probleme d'image avec ie
Problème avec un image pour un graphique
Problème d'affichage d'image avec calques.
J'ai un problème de survol d'image avec lien
Probleme avec EDGE et Chrome
problème avec les caractères accentué dans mes liens
Plus de sujets relatifs à CSS - Problème avec image et zoom
 > Tous les forums > Forum Forum des Webmasters