Prestashop 1.7.4.2 - How to remove hover line on classic template

The original classic template of the Prestashop 1.7.4.2 comes with the quick view thumbnail. It pops up when hovering over the product container - and it looks very annoying because it does not bring many purposes to the product on the show. However, it can be disabled the quick view feature by editing it in the product.tpl

After doing that there will no more hover element but there is one tiny thing left which the 128px long and 1px wide line and when you hover it keeps popping up. That is something not very good to see on the product container. Fortunately there is a way how to remove the hover line and follow the tutorial step below.

1. Open the Custom.css using FileZilla FTP and edit it using NotePad++

2. Copy CSS code below into the custom.css style file



#products .thumbnail-container:focus .product-description:after, #products .thumbnail-container:hover .product-description:after, .featured-products .thumbnail-container:focus .product-description:after, .featured-products .thumbnail-container:hover .product-description:after, .product-accessories .thumbnail-container:focus .product-description:after, .product-accessories .thumbnail-container:hover .product-description:after, .product-miniature .thumbnail-container:focus .product-description:after, .product-miniature .thumbnail-container:hover .product-description:after {
    border-top: none;
}

3. Save and re-upload to replace the existing one

4. Then login to the prestashop admin back office

5. Under Configure > Advanced Parameters > Performance click on "Clear Cache" button

6. Now browse to the prestashop and hover on the product container image the hover line should be gone.