Gallery pattern
Grid to Full Preview
Hover a product and the rest of the shop steps into the dark around it.
This is the real effect, not a video. Scroll, drag and click inside it.
Grid to Full Preview keeps a classic product grid, then makes hovering feel like lighting one piece in a dark showroom. Rest on any item and it blooms into a full preview beside the grid, cycling through detail shots with its name and price, while the remaining products dim into the room. Leave, and the shop resets as if nothing happened.
When to use it
Styled here as a dark furniture house, it suits premium shops with few, expensive products: furniture, lighting, instruments, art. Each product needs a main photograph and two details shot in a consistent style, which is exactly the discipline a premium catalogue should have anyway.
Why it works
It compresses the product page into the grid. The shopper sees details, name and price without leaving the collection, which removes the most expensive click in e-commerce, the one back to the listing. The darkness does the salesmanship, dimming the room around a hovered piece is the oldest showroom trick there is, done in CSS.