Bonjour !

Je souhaites faire en sorte que lorsque la souris d'un utilisateur passe par dessus une image, celle-ci s’agrandisse. Alors, en gros, j'ai 4 images placées sur deux lignes, avec donc 2 images sur la première ligne et les deux autre en dessous. Il n'y a aucun espace entre les deux lignes ni entre les deux colonnes, toutes les images sont collées entre elles. Elles ont initialement toutes la taille de 430 sur 242. Image :

Je souhaiterais que en passant la souris dessus, l'image s'agrandisse pour avoir une taille de 688 sur 387. Jusque là, j'ai tout bien fait.
MAIS, quand je passe sur une image de gauche, voici ce qu'il se passe :

Comme vous pouvez le voir, mon image décale un peu les autres. J'aimerais en fait qu'elle passe devant, mais que les autres images restent fixes.

Aussi, quand je passe maintenant sur une image à droite :

Vous l'aurez compris, je souhaiterais que l'image s'agrandisse "vers en bas à gauche", pour rester dans le cadre.

Voici mon css :
.zoom img:hover { position: absolute; width:688px; height:387px; } .zoom img { margin-top: -5px; }

Voilà, merci par avance :D

Personne ? :/

si j'ai bien compris, tu peux régler ça avec les z-index

regarde du coté des transform (transform: scale(1.1); ) par exemple après j'en sais rien

Mais le z-index, faut que je l'applique uniquement sur les images qui sont à droites nan, pas celles de gauche ?

http://jsfiddle.net/x7Lj1c92/

Explication: tu as ton div conteneur, avec position: relative pour pouvoir positionner les images avec position: absolute relativement au conteneur.
Puis sur le selecteur :hover de tes images, on les agrandit.
On a là 2 problèmes:

1. Les images étant positionnées de manière absolues, elles sont toutes au même endroit: on met des classes pour les positionner. Ici vu qu'il y a que 4 images on peut mettre deux classes sur la même image, l'une spécifiant si elle est à gauche/droite et l'autre si elle est en haut/bas.

<img class="top left" ...></img>
<img class="top right" ...></img>
<img class="bot left" ...></img>
<img class="bot right" ...></img>

#zoom img.bot {
    top: 200px;
} #zoom img.right {
    left: 400px;
}

2. Les images agrandies sont cachées par les autres images qui sont devant. Pour régler ça, on met par défaut z-index: 0 sur chaque image, et on met z-index: 1 sur l'image qui a le hover.

#zoom img {
    z-index: 0;
} #zoom img:hover {
    z-index: 1;
}

3. Les images du bas dépassent en bas et celles de droite dépassent à droite de la zone. Du coup il faut décaler les images du bas en haut et les images de droite à gauche quand elles sont on-hover

#zoom img.right:hover {
    margin-left: -200px;
} #zoom img.bot:hover {
    margin-top: -100px;
}

Note: les classes .left et .top sont en fait inutiles
Ps: désolé pour l'image en exemple pourrie, c'est la première que j'ai trouvée avec une taille adéquate