How it works
Each tile carries two possible state classes - selected and receded - and every visual property change rides on CSS transitions. The selected tile transitions to scale(1.08) with brightness and saturation boosted; siblings transition their filter from none to grayscale(0.75) brightness(0.55) blur(1.5px) and their transform to scale(0.94). JavaScript only recalculates which element gets which class on each tap, then the compositor does the rest. No layout is touched, so the grid keeps its shape while its content re-lights itself.
Two timing details create the polish. First, a speed differential: the selected tile lights up fast (about 0.3s) while siblings recede slower (about 0.45s), so the eye lands on the protagonist before sweeping the dimmed background - that rhythm is what makes it feel cinematic rather than mechanical. Second, the selected tile must raise its z-index; without it, the enlarged tile gets clipped by neighboring elements' stacking and the effect breaks at the edges.
How to use this prompt
Perfect for image galleries, portfolio grids, product collections - anywhere users pick one item to inspect among many. Send the prompt with your grid structure and the AI generates the class logic. If the selected item should reveal a caption or detail strip, add one sentence asking for a details bar below the grid, and the layout will make room.
Tips for better results
Keep blur between 1 and 2px; more turns tiles into mush and reads cheap. Grayscale between 0.6 and 0.8 - leaving a trace of color reads as stepping back, while full gray reads as disappearing. Shrink between 0.9 and 0.95; harder shrinks open gaps in the grid. Filter animation is per-pixel work: a nine-tile grid is free, but a fifty-tile waterfall should only filter tiles inside the viewport. And always provide an exit - tapping the empty area should restore everything, so users are never locked into the focus state.