C'est assez simple, il suffit de regarder comment cela fonctionne avec l'inspecteur de ton navigateur.
En résumé : au moment du survol de la div .candidat qui englobe l'image et son lien se déclenche une transformation CSS utilisant la fonction scale() (https://www.alsacreations.com/article/lire/1418-css3-transformations-2d.html#scale) pour agrandir l'image. Il y a de plus un overflow:hidden sur la div .candidat pour cacher ce qui sort du contenant.
on remarque bien qu'il ya un zoom de l'image limite par le bloc avec une écriture au dessous qui reste figée et n'est pas mise en relief comme pour l'image
C'est exactement ce dont je te parlais ce matin : l'effet de zoom est dû à la propriété CSS transform qui se déclenche au survol de l'image. Propriété qui affecte uniquement l'image et pas le texte.
C'est un effet assez joli mais qui reste ultra-basique avec un tout petit peu de réflexion. Je t'ai quasiment tout dit mais comme tu débutes je vais te donner quelques pistes supplémentaires pour que tu trouves seul :
Pour le HTML tu as besoin d'une div qui contient ton lien et à l'intérieur de ce dernier ton image et ton texte.
Du côté du CSS, il te suffit d'une transformation CSS (voir le lien dans mon premier post) qui augmentera la taille de l'image au survol de cette dernière et de la propriété overflow:hidden sur ta div générale afin de masquer l'image qui s'agrandit.
Avec ces indications, la possibilité de regarder le code source de ton exemple ainsi que le lien de mon précédent message tu n'auras aucun souci pour trouver la solution.
lorsque j'ai poste le message au premier coup je ne savais que c'est un effet de zoom par la propriété transform css qu’après la première réponse de "Mewen_bzh". a ce moment j'ai refait mes recherches sur ce effet de transform et scale en css
Dire à quelqu'un qu'on connait la réponse sans pour autant la donner ni fournir une piste pour la trouver, formulé ainsi ça me paraît être au mieux de la moquerie ou du troll, donc pas dans la même catégorie qu'une mauvaise info hasardeuse et une bien pire réponse dans un forum d'entraide. Mais c'est un autre sujet donc on n'en dira pas plus ici.
Lol je comprend pour ton post, mais le sujet de mon post n’était pas pour ça du tout, en fait c’était une joke pour LOLlock vis-à-vis de BebertBeberr qui dit un truc sans savoir de quoi il en retourne. Et là je me pointe et dit et bien moi je n'ai rien à dire même si je sais.
Et de la comme je suis un gentil petit gars, je te pose quelque démo de jolie zoom et animes faites entièrement en CSS .
Et tu as raison. C'est en cherchant que l'on apprend et que l'on retient le mieux. Il ne faut juste pas avoir peur de se tromper. Si tu savais le nombre de grosses erreurs bêtes que j'ai fait à mes débuts de développeur... Et je te rassure j'en fais encore aujourd'hui...
Maintenant que tu connais la propriété CSS transform je peux te montrer la démo que je t'ai fait, tu la comprendras plus facilement : https://codepen.io/Mewen/pen/MQJRKK
Tu as un exemple avec un effet de zoom et en bonus un exemple avec un effet de dézoom (tout aussi simple à faire : l'image est agrandie en CSS et reprend sa taille normale au survol).
N'hésite pas non plus à lire les cours sur les transformations CSS :
lorsque j'ai poste le message au premier coup je ne savais que c'est un effet de zoom par la propriété transform css qu’après la première réponse de "Mewen_bzh". a ce moment j'ai refait mes recherches sur ce effet de transform et scale en css
Je ne réponds pas aux messages privés.
survol particulier d'images en tant que lien HTML
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Moderateur forum || FAQ 3D || discord 3D francophone || OC Tweak script
Compos sui.
Moderateur forum || FAQ 3D || discord 3D francophone || OC Tweak script
Compos sui.