How to make add to cart button and border around product transparent then show on hover

Store Design
, ,

Topic summary

A user wants to hide the “Add to Cart” button and product border by default, making them appear only on hover over product images in their collection page.

Proposed Solution:

  • Navigate to Online Store → Edit Code → base.css file
  • Add CSS code at the end of the file that sets opacity to 0 for .product-item__hover-container and .product-item__hover-action-wrap elements on hover

Technical Details:

  • The CSS targets hover and focus-within states
  • Uses !important flags to override existing styles
  • Sets both opacity: 0 and visibility: hidden for the action wrapper

Status: Solution provided but not yet confirmed as tested or working by the original poster.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

https://www.bigbrattboutique.com/collections/tops

How do I get this effect when you hover over the product image? I like how the quick view and border is transparent then shows up when you hover over product.

2

Hi,
Go to your online store -edit code → base.css file and paste this code in the end of file

.product-item__inner:hover .product-item__hover-container, .product-item__inner:focus-within .product-item__hover-container {
            opacity: 0 !important;
    }
.product-item__inner:hover .product-item__hover-action-wrap, .product-item__inner:focus-within .product-item__hover-action-wrap {
        opacity: 0 !important;
        visibility: hidden !important;
    }