Je me demandais comment on pourrait arriver à imiter un effet un peu dans le genre de ce qu'on voit sur ce site [lien vers un site]. L'effet que je trouve vraiment sympa, c'est quand on survole les images, ça crée une espèce de décalage / zoom très subtil. J'ai trifouillé un peu le CSS, mais j'arrive pas à quelque chose d'aussi propre. Des idées ?
Salut Weber, C'est vrai que l'effet est sympa. Tu as déjà regardé du côté des `transform: scale()` et `transition` pour le zoom, et peut-être jouer avec `overflow: hidden` sur le conteneur de l'image pour le décalage ? Est-ce que tu pourrais partager ton code actuel, même si c'est pas parfait, pour qu'on puisse voir où ça bloque ?
CodeSpartacus, t'as raison, j'ai tenté un truc vite fait avec scale() mais je crois que je m'embrouille avec les histoires de conteneur. L'overflow hidden, j'y avais pas pensé tiens ! En gros, ce que j'ai pour l'instant c'est un truc super basique : .image-container { width: 300px; height: 200px; overflow: hidden; /* Ajouté après ta suggestion */ } .image-container img { transition: transform 0.3s ease; } .image-container:hover img { transform: scale(1.1); } Le problème, c'est que l'image zoom bien, mais elle déborde du container et c'est pas très joli. J'imagine que c'est là que l'overflow doit jouer, mais je suis pas sûr de comment bien le combiner avec le scale().
Weber, pour ton souci de débordement, t'as pensé à jouer avec la position de l'image dans le container ? Un petit `object-fit: cover;` ou `object-fit: contain;` pourrait peut-être aider à gérer le zoom sans que ça parte en live. Sinon, j'ai vu une vidéo pas mal sur le box model CSS,
Prépa Certification Architecte de solutions AWS | Ep.29 : Le “Box Model”(CSS) 2ème Partie “, ça pourrait te donner d'autres pistes.
DigitalEcho11, l'object-fit, j'avais zappé complètement, merci du tuyau ! Je vais tester ça. Pour la vidéo, je la regarderai plus tard, mais c'est vrai qu'un rappel sur le box model, ça fait jamais de mal. En fait, ce qui me tracasse le plus, c'est réussir à avoir un truc *vraiment* smooth. J'ai l'impression que les transitions CSS, c'est un peu une science exacte. Genre, si tu piges pas bien les timings et les `easing functions`, t'as vite fait d'avoir un effet qui fait cheap. J'ai regardé un peu plus en détail le site que j'avais mentionné (celui avec l'effet que je voulais reproduire). Ils ont l'air de jouer pas mal avec les `cubic-bezier` pour l'animation. D'ailleurs, en parlant de propriétés CSS transitions, la vitesse d'animation joue énormément, si l'effet est trop rapide, ça ne rendra pas comme je le souhaite. Je pense qu'il faut que je creuse de ce côté. Peut-être combiner ça avec un léger décalage en plus du zoom. Un truc du genre `transform: translate()` en même temps que le `scale()`, mais là, faut vraiment doser pour que ça fasse pas vomir. En tout cas, merci pour les pistes, je vais tester tout ça et je vous tiens au courant si j'arrive à un truc présentable.
Weber :