Comparateur d'image avant et après
Fais glisser la ligne centrale pour comparer deux versions d'une image ; marche aux flèches et sur écran tactile.
Réglages
Code
<div class="uv-mba"><div class="im a" aria-hidden="true"><svg viewBox="0 0 320 200" preserveAspectRatio="xMidYMid slice"><ellipse cx="70" cy="45" rx="34" ry="10" fill="#fff" opacity=".85"/><ellipse cx="150" cy="30" rx="24" ry="7" fill="#fff" opacity=".7"/><circle cx="240" cy="62" r="22" fill="#fde047"/><path d="M0 120C40 95 80 100 120 110S200 80 250 95 300 105 320 100V200H0Z" fill="#65a30d"/><path d="M0 150C50 120 110 140 160 135S260 120 320 140V200H0Z" fill="#3f6212"/><ellipse cx="205" cy="178" rx="92" ry="13" fill="#38bdf8"/><rect x="70" y="116" width="4" height="22" fill="#422006"/><circle cx="72" cy="110" r="13" fill="#166534"/><rect x="246" y="126" width="26" height="18" fill="#f8fafc"/><path d="M242 128l17-12 17 12z" fill="#dc2626"/></svg></div><div class="im b" aria-hidden="true"><svg viewBox="0 0 320 200" preserveAspectRatio="xMidYMid slice"><ellipse cx="70" cy="45" rx="34" ry="10" fill="#fff" opacity=".85"/><ellipse cx="150" cy="30" rx="24" ry="7" fill="#fff" opacity=".7"/><circle cx="240" cy="62" r="22" fill="#fde047"/><path d="M0 120C40 95 80 100 120 110S200 80 250 95 300 105 320 100V200H0Z" fill="#65a30d"/><path d="M0 150C50 120 110 140 160 135S260 120 320 140V200H0Z" fill="#3f6212"/><ellipse cx="205" cy="178" rx="92" ry="13" fill="#38bdf8"/><rect x="70" y="116" width="4" height="22" fill="#422006"/><circle cx="72" cy="110" r="13" fill="#166534"/><rect x="246" y="126" width="26" height="18" fill="#f8fafc"/><path d="M242 128l17-12 17 12z" fill="#dc2626"/></svg></div><span class="tg l" aria-hidden="true">Avant</span><span class="tg r" aria-hidden="true">Après</span><i class="hd" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l-5 6 5 6M15 6l5 6-5 6"/></svg></i><input type="range" min="0" max="100" step="0.1" value="50" aria-label="Comparer avant et après"></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Micro-interactions
Voir tout : Micro-interactionsOù l’utiliser
Photographes, retoucheurs et entreprises de rénovation utilisent ce comparateur pour montrer leur travail. À gauche, une version terne et délavée d'un paysage, à droite la retouche éclatante, séparées par une ligne avec une poignée ronde. Un petit balayage à l'apparition suggère que la ligne se déplace, et des étiquettes marquent chaque côté.
Un input range natif et invisible couvre toute l'image, donc glisser n'importe où, toucher ou utiliser les flèches déplace la séparation de façon accessible. Remplace la scène dessinée par deux vraies photos au même cadrage.