Close

e-Commerce product card with animation effect

This is an example of an e-Commerce product card with an animation effect, designed using HTML, CSS, and Bootstrap framework 4. It can be used to showcase the e-commerce products stylishly. The product image has been imported to the code with its URL. The body of the form is given a background color of #B71C1C. The product card is given the styles of height as 420px, width as 320px, background-color as #C62828, border-radius as 10px, and a transform effect of skewY(345deg), to create the hover animation. In a hover event, the image changes its width to 80%, creating the hover effect. The justify-content and align-items styles have been set as center to centralize the elements. The 'Buy Now' button is created as a success type button and given a style set of font color as #fff, background-color as #ef5350, border-color as #ef5350, and width as 160px. In a hover event, the button takes the background color of #e84040 and the border-color of #e84040. Source:https://bbbootstrap.com/snippets/bootstrap-ecommerce-product-card-animation-effect-30372547

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Several Related Snippets

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.