Prestashop 1.7.4.2 - How to make frame hover effect on product container classic template

The original classic template looks very plain especially the product container - however, you can change it to make it looks lively by adding a hover effect to the frame when a user hovers the mouse on the product. How this can be done is by adding some CSS code to the custom.css - follow this tutorial how to make it.

1. Login to your FTP I am using FileZilla

2. Look for the folder .../htdocs/themes/classic/assets/CSS

3. Open / edit the custom.css file using notepad++

4. Add the following CSS code - where the code is to make the margin of the product container to 2px to make it stand out. The second code is to add background hover color in this case color is orange #fe9a52

/* product container article padding 4px to make the hover effect more obvious*/

#products .product-miniature, .featured-products .product-miniature, .product-accessories .product-miniature, .product-miniature .product-miniature {
margin: 0px;
padding: 2px;
}

/* product container hover effect */

article.product-miniature.js-product-miniature:hover {
background: #fe9a52;
}

5. Save the custom.css and re-upload to replace the existing one.

6. Then login to the PrestaShop admin back office

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

8. Now browse to the shop and hover to the container image it should show orange color frame when hovering on it.