Hello! I’m using the theme Outsiders. I have a collection grid on my homepage that I need help with. I want the background of the grid photos to be white. They’re regular images that I used CSS to arch. The blur hover effect is on, which I would like to keep.
This is the code I entered into section to change the photos in the section to be arched. Once I entered it, the black background automatically popped up.
Any help would be greatly appreciated!
@tiffany3 Can you please provide the URL of your store and if it is password protected please share the password too. Thanks
Password: eultia
@tiffany3 You need to add this code in the theme files. For which you need to go to Online Store > Actions (Active theme) > Edit Code > Assets, under assets add the code at the bottom of base.css file.
.collection-card.color-inverse{
background-color: #fff;
}
@tiffany3 You need to add this code in the theme files. For which you need to go to Online Store > Actions (Active theme) > Edit Code > Assets, under assets add the code at the bottom of base.css file.
.collection-card.color-inverse{
background-color: #fff;
}
Hi @tiffany3
You can follow the instruction here to change the color your collection grid:
Go to Shopify > Theme > Customize > open Custom CSS
Copy and paste this code to the section > Save
.collection-card.color-inverse .collection-card__img-wrapper {
background-color: #ffffff;
}
#shopify-section-template--18379913887996__collection-grid .collection-grid .have-overlay {
--overlay-alpha: 0%;
}
Here is the result :
Hi @tiffany3
Can you try again with this code :
.collection-card.color-inverse .collection-card__img-wrapper {
background-color: #ffffff;
}
.collection-grid .have-overlay {
--overlay-alpha: 0%;
}
Thank you so much! You’re so very appreciated!