Category grid Display - Item Hover

Question

On main category page when I mouse over each product - this is how they show. Product image displays - Title/Price get covered up.

There seems to be another hover box behind and below the main one which covers the product below the current highlighted one. And all the products are not spaced out at all. They are right next to each other.

I am not sure how this came about - I have a custom theme(parent is Luma). I have copied over to my theme the Magento_Catalog/layout , Magento_Catalog/templates, Magento_Catalog/web and Magento_Catalog/requirejs-config.js

I have not edited any of the files in Magento_Catalog/layout

I am thinking that maybe the styling is wrong somewhere?

Does the catalog style come from lib/web/css/source/lib?

I can not seem to find where the hover effect is coming from? jQuery? knockoutJs?

I appreciate any help! I have been trying to figure this one out for days!

Answer 1

I don't know exacty resolve, but i resolved with CSS.

.catalog-category-view {
.products-grid {
    .product-item-info {
        box-shadow: 0px 1px 6px 2px rgba(0, 0, 0, 0.3);
        background: #f0f0f0;
        &:hover,
        &:active {
            box-shadow: none;
            border:0;
            padding:0;
            margin:0;
        }
        &:not(:hover):not(.active) {
            .product-item-inner {
                overflow: inherit;
                clip: auto;
            }
        }
    }
}