E-Commerce Product Viewer

This is a CSS-Only E-Commerce Product Viewer. It implements a fully functional product configurator — including color variant swapping, synchronized background theme changes, and an interactive details accordion — without a single line of JavaScript. Its function is to demonstrate complex UI state management and immediate visual feedback using native CSS capabilities.

Specs

• Weight: ~5 KB. Pure CSS and HTML.
• Performance: High. The state changes trigger opacity and transform animations, keeping DOM repaints minimal. The product images are pre-loaded via background-image declarations.
• Theming / Customization: Themes are tightly coupled to the HTML structure via CSS sibling selectors (~). Adding a new color variant requires adding a radio input, a label, an .img-wrap div, a .back-color div, and the corresponding CSS rules.
• Responsiveness: Fluid. It scales down gracefully using standard @media queries, reflowing the horizontal layout into a stacked, centralized mobile view.
• Graceful Degradation: [!] The “checkbox hack” hides the native <input type="radio"> with visibility: hidden; position: absolute;. This removes it from the accessibility tree, breaking keyboard navigation (Tab targeting) and screen reader support. It should be replaced with visually hidden classes (clip: rect(0 0 0 0)).

Anatomy

• HTML: A heavy reliance on hidden radio inputs acting as state controllers. There are inputs for the accordion (.desc-btn) and inputs for the color variants (.color-btn). Following these inputs are the corresponding <label> elements and the target <div> containers (.img-wrap, .back-color).
• CSS: The central logic engine. It uses the general sibling combinator (~) to link the :checked state of a radio input to elements much further down the DOM tree. It defines the @keyframes shake animation to provide tactile feedback when a product image swaps.

Logic

The architectural core is the extreme application of the CSS sibling combinator to control multiple, disparate visual layers from a single input source.

/* 1. The trigger */
.for-color-2:checked ~ 

/* 2. Target the product image */
.img-wrap.chair-2 {
  opacity: 1;
  animation: shake 0.7s cubic-bezier(.36,.07,.19,.97) both;
}

/* 3. Target the background gradient */
.for-color-2:checked ~ .back-color.chair-2 {
  opacity: 1;
}

/* 4. Target the "Add to Cart" button pseudo-element */
.for-color-2:checked ~ .info-wrap .btn:before {
  background-color: #1a1a1a;
}

When the user clicks the “Color 2” label, it checks the hidden radio button. The CSS engine immediately scans forward through the DOM siblings. It finds the corresponding .img-wrap.chair-2, makes it visible, and triggers a physical “shake” animation. It simultaneously finds the corresponding .back-color.chair-2 layer to transition the global background gradient. Finally, it reaches into the .info-wrap to change the accent color of the CTA button. This creates a cohesive, global theme change without any JavaScript event listeners or state management libraries.

Feel

Instant and cohesive. Because the state is managed by the browser’s CSS parser rather than a JavaScript virtual DOM, the response to a click is immediate. The subtle @keyframes shake applied to the chair image gives the transition a physical weight, making the color swap feel like a mechanical slide carousel rather than a flat digital image replacement.