Showing results for 
Search instead for 
Did you mean: 

Show Full Product Name on Hover

Show Full Product Name on Hover

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!


Re: Show Full Product Name on Hover

check this 

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

for full details go to this link 

Re: Show Full Product Name on Hover