Add background to product card

Is there any way to add a background/card to a product list item? I am looking to achieve something like this:

@Zambo107 Can you please share your site URL?

diabeticexchangeusa.com

@Zambo107 Try adding the code under Website > Pages > Website Tools > Custom CSS.

Here's the code to create something similar to your first screenshot:

.products.collection-content-wrapper .grid-item.is-loaded {
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 2rem;
    padding: 10px;
}

Here's the code to create something similar to your second screenshot:

.products.collection-content-wrapper .grid-item.is-loaded {
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 2rem;
    padding: 10px;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
}

Thanks! It looks good, however, it is not centered on mobile, how can I fix this?

And how can I disable the hover effect when my mouse goes over the image? 

Also, is there a way I can round image cards sitewide? I am referring to these:

@Zambo107 To fix the issue on mobile view:

@media screen and (max-width: 767px) {

.products.collection-content-wrapper .grid-item .grid-item-image {
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
}
.products.collection-content-wrapper .grid-item.is-loaded {
	padding: 10px 0px !important;
}
.products.collection-content-wrapper .list-grid {
	grid-column-gap: 20px !important;
}
  
}

@Zambo107 To disable the hover effect on product images, add this code:

.products.collection-content-wrapper .grid-image-hover {
    opacity: 0 !important;
}
.products.collection-content-wrapper .grid-image-cover {
    opacity: 1 !important;
}

The code for centering on mobile is not working on my end, I'm not sure if I'm doing something wrong

Also, is there a way to add a different mouse hover effect? Maybe a zoom-in/enlarge type effect?

@Zambo107 Check the code again for mobile view centering issue. I'm not seeing the code added to the site yet.

@Zambo107 To add image card/rounded border on list item images:

.user-items-list-carousel__media-inner {
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 2rem;
  	box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
}

I added the code for the center on mobile, it does not work on my end

Sorry, I did it wrong, it works now.

@Zambo107 To add a zoom-in/enlarge hover effect on product images:

.products.collection-content-wrapper .grid-item.is-loaded:hover .grid-image-cover {
	transform: scale(1.05);
  	transition-duration: 1s;
}

Thank you, last thing, how can I round the border of collection cards? Not the image within the collection card

@Zambo107 To add rounded border on collection cards/list items:

.user-items-list-carousel .list-item[data-is-card-enabled="true"] {
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 2rem;
	box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
}