Show Full Product Name on Hover

[letssewllc]

Here is what I am wanting to achieve:

Say I have a Product name that exceeds the limitations of what is set for category grid pages. This portion works properly, it shows the ellipsis for the overflow.

What I am wanting to do, is when someone hovers over the item, whether on the image/name/whatever, the full product name will show.

Utilizing Chrome's inspect tool, I have come close. Adding :hover & overflow: visible to .product-item-name gives the hover to the product's name, but nothing else and the overflow doesn't show in the center above the other items.

Any help is appreciated!

[nitish_raj1]

check this 

.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;
            }
        }
    }
}

for full details go to this link

https://magento.stackexchange.com/questions/190653/category-grid-display-item-hover 

[nitish_raj1]

you can follow this link 

https://www.magemonkeys.com/add-hover-image-in-a-product-to-display-on-listing-page-magento-2/

[letssewllc · Accepted solution]

I did end up finding a solution to this so figured I should probably provide said solution and mark this as solved

.product-item-info:hover > .product-item-details > .product-item-name
{
    text-overflow: revert;
    overflow: revert;
    white-space: revert;
}

This css code worked for me