E-commerce product list with on-hover effect
This is an example of an e-commerce product list with hover effects, designed using HTML, CSS, and Bootstrap framework 4. The product images are imported to the code with their URLs. The body of the form is given a background color of #B3E5FC. The product card is given a border-radius of 6px, and background color of #fff. The product details are displayed using a font-size of 13px, and a color of #cbcbcb. The cost of the product is displayed using the styles of font color as #fb3531, font-weight as bold, and font-size as 20px. The cost of the three products is displayed using three different font colors. The rating stars are displayed using the color of #FBC02D. The cursor style for the products is set as pointer to get the hand cursor effect on hover. The text on the 'Add to Cart' button is displayed using a text style as uppercase to automatically convert the text to uppercase. The image container is given an animation of fade_in_show 0.5s to create the animation on hover.