E commerce product list on hover
This is an example of an e-commerce product list that displays the product details on hover, designed using HTML, CSS, and Bootstrap framework 4. The concept of Lists has been used with UL and LI components. UL element has been used with the child elements of LI to display the icons in an orderly manner. The product images are imported to the code with their URLs. The container is given margin-top and bottom values as 50px, whereas the product cards are given a border style of 1px solid #673AB7. In a hover event, the row of icons takes an animation of 300ms ease-in-out 0s normal none 1 running fadeInRight, and an opacity value of 1. The product name is displayed using the styles of font color as #673ab6, font-family as Old Standard TT, font-size as 17px, font-weight as 600, text-transform as capitalize to turn the first letter of each word to capital, and transition as all 0.3s ease 0. The price is displayed using the styles of font color as #313131, font-family as Poppins, font-size as 16px, and font-weight as 500.