Bonjour à tous,
j'ai voulu mixer deux tutoriaux et au final le résultat n'est pas excellent et je pense qu'un regard expérimenté pourra facilement me renseigner.
La version dev de mon site est à l'adresse suivante :
http://dev.fallenwarlords.fr/
(PS : si vous n'êtes pas sous firefox en 1920*1080 inutile d'essayer le rendu sera beurk...)
Le passage du curseur sur l’icône verte en haut à gauche lance l'affichage d'une galerie. A l'intérieur de celle-ci, un effet 3D est créé sur les 5 miniatures présentes. C'est fonctionnel à ce stade. J'ai rajouté par dessus la chose suivante : lorsque le curseur passe sur une miniature, celle-ci est agrandie automatiquement et est placée un peu en dessous en taille normale.
Le problème comme vous le constaterez est le suivant : si la souris ne suit pas l'image qui se déplace, elle reprend sa place et taille initiale dans la galerie.
Des idées pour résoudre ce genre de soucis ?
La miniature est gérée comme ça :
Merci d'avance
j'ai voulu mixer deux tutoriaux et au final le résultat n'est pas excellent et je pense qu'un regard expérimenté pourra facilement me renseigner.
La version dev de mon site est à l'adresse suivante :
http://dev.fallenwarlords.fr/
(PS : si vous n'êtes pas sous firefox en 1920*1080 inutile d'essayer le rendu sera beurk...)
Le passage du curseur sur l’icône verte en haut à gauche lance l'affichage d'une galerie. A l'intérieur de celle-ci, un effet 3D est créé sur les 5 miniatures présentes. C'est fonctionnel à ce stade. J'ai rajouté par dessus la chose suivante : lorsque le curseur passe sur une miniature, celle-ci est agrandie automatiquement et est placée un peu en dessous en taille normale.
Le problème comme vous le constaterez est le suivant : si la souris ne suit pas l'image qui se déplace, elle reprend sa place et taille initiale dans la galerie.
Des idées pour résoudre ce genre de soucis ?
La miniature est gérée comme ça :
figure:hover
{
outline: none;
-webkit-transform: translate(-100px,350px) scale(4);
-moz-transform: translate(-100px,350px) scale(4);
-webkit-box-shadow: 0 3px 10px #666;
-moz-box-shadow: 0 3px 10px #666;
transition:1s;
z-index: 9999;
}Merci d'avance