--- title: "Image avant/après : un comparatif au curseur" description: "Créez un comparatif visuel entre deux images superposées que le visiteur révèle avec un curseur, parfait pour montrer une transformation avant/après." url: https://docs.vivlab.com/editor/menu/image-before-after --- # Image avant/après L'élément **Image avant/après** crée un comparatif visuel entre deux images superposées. Le visiteur déplace un curseur central pour révéler progressivement la seconde image. C'est un format très utilisé pour montrer une transformation (avant/après retouche, restauration, soin, rénovation…). ## Charger les deux images Le panneau latéral affiche deux emplacements **Image n°1** et **Image n°2**. Pour chacun : - Si aucune image n'est chargée, glissez-déposez ou cliquez pour importer un fichier. - Si une image est déjà présente, l'outil de recadrage s'affiche pour ajuster le cadrage. Le bouton **Modifier l'image** permet de la remplacer. Les deux images doivent partager les mêmes proportions (déterminées par les dimensions du bloc sur la canvas), sinon la comparaison serait visuellement déséquilibrée. ## Style Le [panneau de style](https://docs.vivlab.com/editor/style/index.md) regroupe l'[arrière-plan](https://docs.vivlab.com/editor/style/background.md), les [bordures](https://docs.vivlab.com/editor/style/border.md), l'[arrondi des angles](https://docs.vivlab.com/editor/style/border-radius.md), l'[ombre](https://docs.vivlab.com/editor/style/box-shadow.md), les [marges intérieures](https://docs.vivlab.com/editor/style/padding.md), les [filtres](https://docs.vivlab.com/editor/style/filter.md) et les [transitions](https://docs.vivlab.com/editor/style/transition.md). La rubrique [Maquette](https://docs.vivlab.com/editor/style/mockup.md) y figure également : l'appareil choisi encadre l'ensemble de la comparaison, et le curseur reste manipulable à l'intérieur de l'écran.