Nike Product Card Interaction

This Nike Product Card Interaction is a dynamic UI component designed for e-commerce listings. It transforms a standard static product grid into an engaging experience. When a user hovers over a card, the product image rotates and shifts to make room for a vertical brand label that slides in from the side. This clever use of space allows for a clean initial view while revealing branding details on demand.

Core Technique

The animation relies on coordinated CSS transitions triggered by the .card:hover state.

1. Image Rotation: The product image (.card__img) has a transition set. On hover, it rotates 30deg and moves 3.5rem to the right using margin-left.
2. Label Reveal: The vertical text label (.card__name) is initially positioned off-canvas (left: -25%). On hover, it slides into view (left: 0).
3. Layout Shift: The pricing section (.card__precis) also shifts right to maintain visual balance with the moved image.

Customization

The color scheme is managed via CSS variables, making theme adjustments straightforward.

:root {
  /* Card Background Colors */
  --first-color: #E3F8FF;
  --second-color: #DCFAFB;
  --third-color: #FFE8DF;
  
  /* Accent Color for prices/hover */
  --accent-color: #FF5151;
}

To change the rotation angle of the shoe, modify the transform property:

.card:hover .card__img {
  /* Change 30deg to your preference */
  transform: rotate(30deg); 
}

Tips

1. Aspect Ratio: The images used here are PNGs with transparent backgrounds. This is crucial for the rotation effect to look clean against the colored card background. Ensure your product images are properly cut out.

2. Accessibility: The current implementation uses empty anchor tags <a> for icons without aria-label or inner text. This is an accessibility issue.

<!-- Better Approach -->
<a href="#" class="card__icon" aria-label="Add to Wishlist">
  <ion-icon name="heart-outline" aria-hidden="true"></ion-icon>
</a>