Now something else is happening, the title disappears and comes back again in a different position.
You can see it live.
Topic summary
Goal: Disable the hover effect on color swatches (color picker) beneath product photos so swatches are always visible and the product title doesn’t move or fade.
Context: The store URL was shared (sassysusa.com). Images illustrated the hover vs. non-hover states and later issues (swatches shifting upward, title fading/repositioning).
Attempts:
- CSS to set fixed height/margins for the swatch container kept swatches visible but still triggered hover behavior: swatches moved and the title disappeared on hover.
- Additional CSS proposed to remove transitions/transforms on the title and adjust swatch transform/position on hover. This led to flickering and title jumping.
- Another suggestion disabled title transitions/transforms; it caused layout issues per screenshots.
Resolution: The original poster implemented a working CSS override:
- .product-card .product-card-swatches–title { opacity: 0 !important; }
- .product-card .product-card-swatches { overflow: show !important; transform: none !important; }
Outcome: The hover effect was effectively neutralized, keeping swatches stable/visible. Discussion concluded with a user-confirmed fix; no remaining open questions.
