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!
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
you can follow this link
https://www.magemonkeys.com/add-hover-image-in-a-product-to-display-on-listing-page-magento-2/