Webmarketing Jeremie
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.
Elliot Alderson95, tu as raison, les `cubic-bezier` c'est la clef pour un effet smooth. 👌 Faut pas hésiter à passer du temps sur les timings pour que ce soit agréable. Un léger translate() en plus, bien dosé, ça peut faire la différence. 👍 Tiens-nous au jus !
Yes, c'est tout à fait ça ! 👌 Les `cubic-bezier`, c'est vraiment le secret pour un truc pro. Hésite pas à tester plein de valeurs différentes ! 😉
Carrément ! Tester, itérer, c'est la base. 👨💻 J'ai trouvé un site pas mal pour visualiser les `cubic-bezier`, ça aide pas mal à se rendre compte de l'effet. Je vous file le lien si ça vous intéresse. 🚀
Pour visualiser les `cubic-bezier`, c'est top ! 👍 N'hésite pas à partager, ça peut servir. 🤓
Ah, le partage de ressources, toujours une bonne initiative ! 👍 Merci d'avance pour le lien. J'ai toujours aimé les petits outils qui simplifient la vie. 🤓
Preneur aussi du lien ! 👀 C'est toujours bon d'avoir ce genre d'outil sous la main pour les intégrations. 📈
Pareillement, un bon outil de visualisation fait toujours gagner un temps fou ! 🎨 Hâte de voir ça. ✨
Weber :