Fotos

HTML + CSSOverlays

Panel lateral redimensionable con imanes

Un panel de detalles que estiras desde su asa y se imanta a tres anchos; su contenido se reorganiza solo con container queries.

Ajustes

16px
1x

Código

<div class="uvq13-rsz"><p class="tt">Fotos</p><div class="gr"><button type="button" class="ph" style="--a:#f97316;--b:#7c3aed" data-d="4032 × 3024" aria-label="IMG_0412.jpg" aria-haspopup="dialog"></button><button type="button" class="ph" style="--a:#0ea5e9;--b:#14532d" data-d="3024 × 4032" aria-label="IMG_0418.jpg" aria-haspopup="dialog"></button><button type="button" class="ph" style="--a:#facc15;--b:#dc2626" data-d="4032 × 2268" aria-label="IMG_0433.jpg" aria-haspopup="dialog"></button><button type="button" class="ph" style="--a:#64748b;--b:#0f172a" data-d="4032 × 3024" aria-label="IMG_0451.jpg" aria-haspopup="dialog"></button><button type="button" class="ph" style="--a:#f472b6;--b:#0e7490" data-d="3024 × 3024" aria-label="IMG_0460.jpg" aria-haspopup="dialog"></button><button type="button" class="ph" style="--a:#a3e635;--b:#166534" data-d="4032 × 3024" aria-label="IMG_0477.jpg" aria-haspopup="dialog"></button></div><span class="snap" aria-hidden="true"><i style="--d:7.5"></i><i style="--d:11.5"></i><i style="--d:16"></i></span><aside class="pn" role="dialog" aria-labelledby="uvq13-rsz-n"><div class="hd" role="separator" tabindex="0" aria-orientation="vertical" aria-label="Ancho del panel" aria-valuemin="0" aria-valuemax="2" aria-valuenow="1"><i></i></div><div class="in"><header><b class="fn" id="uvq13-rsz-n"></b><button type="button" class="x" aria-label="Cerrar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></header><i class="pre" aria-hidden="true"></i><dl class="mt"><div><dt>Dimensiones</dt><dd class="dd"></dd></div><div><dt>Tamaño</dt><dd>4,2 MB</dd></div><div><dt>Cámara</dt><dd>f/1.8 · 1/250</dd></div><div><dt>Fecha</dt><dd>12/10/2026</dd></div></dl><div class="act"><button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 4v11M7.5 10.5L12 15l4.5-4.5M5 19.5h14"/></svg><span>Descargar</span></button><button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 7h14M10 11v6M14 11v6M6.5 7l1 12.5h9l1-12.5M9.5 7V4.5h5V7"/></svg><span>Eliminar</span></button></div></div></aside></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.

Versión Markdown con todo el código, para asistentes de IA

Más en Overlays

Ver todos: Overlays

Dónde usarlo

Los paneles de detalle nunca tienen el ancho justo, así que este deja elegirlo. Arrastras el asa y el panel la sigue, unas guías discontinuas muestran tres anchos con imán y al soltar salta con muelle al más cercano, o se cierra si casi lo aplastas. Encaja en fototecas, gestores de archivos, tablas de administración y correo.

El color principal es el del asa y la acción principal, el secundario su fondo suave. El asa es un separador que recibe foco y se mueve con las flechas, Inicio y Fin, y Escape cierra el panel devolviendo el foco al elemento elegido.