Slider avant/après

Construis ton slider avant/après

Structure HTML

Ajoute une "div" avec la classe "before-after", puis à l'intérieur places-y 2 éléments "image" avec les classes "after" et "before" et ajoute les images de ton choix.

‍

Style CSS à appliquer dans Webflow

Pour le style réfères-toi à l'exemple de démonstration ou applique les propriétés ci-dessous.

‍Élément avec la classe "before-after":

• position: relative  
• display: block
• overflow: hidden
• cursor: grab
• user-select: none (facultatif) -> À placer dans les "Custom properties"

‍

‍Élément avec la classe "before":

• display: block
• position: absolute
• top: 0
• left: 0
• width: 100%
• height: 29rem (En fonction de la taille des images que tu souhaites)
• fit: cover
• pointer-events: none
• clip-path: inset(0 50% 0 0) -> À placer dans les "Custom properties"

‍

Élément avec la classe "after":

• display: block
• width: 100%
• height: 29rem (En fonction de la taille des images que tu souhaites)