Comparador de imagen antes y después
Arrastra la línea central para comparar dos versiones de una imagen; funciona con flechas y en pantallas táctiles.
Ajustes
Código
<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">Antes</span><span class="tg r" aria-hidden="true">Despué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="Comparar antes y después"></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Microinteracciones
Ver todos: MicrointeraccionesDónde usarlo
Fotógrafos, retocadores y empresas de reformas usan este comparador para enseñar su trabajo. A la izquierda queda una versión apagada y lavada de un paisaje y a la derecha la edición viva, separadas por una línea con un asa redonda. Al aparecer, un pequeño barrido sugiere que la línea se puede arrastrar, y unas etiquetas marcan cada lado.
Un input range nativo e invisible cubre toda la imagen, así que arrastrar en cualquier punto, tocar o usar las flechas mueve la división con buena accesibilidad. Cambia la escena dibujada por dos fotos reales con el mismo encuadre.