Close

Product card with rotate button on hover.

This is a template of a web form with a product card with a rotate button on hover, designed using JavaScript, HTML, and CSS. JavaScript functions have been used to implement the hover effects. The icons, images and fonts are imported to the form with their URLs. The image card is given the styles of font-family: 'Raleway', Arial, sans-serif, position: relative, overflow: hidden, margin: 10px,min-width: 230px, max-width: 315px, width: 100%, background: #ffffff, text-align: left, color: #000000, box-shadow: 0 0 5px rgba(0, 0, 0, 0.15), font-size: 16px, and transform: translateZ(0). The image has the styles of vertical-align as top, max-width as 100%, and position as relative. The initial price is given an opacity value of 0.5 and a font-size of 0.9em whereas the discounted price is given the font-size 1.5em. The text-transform style of uppercase is given to the Add to Card icon along with the background color #409ad5. In a hover event, the icon takes a transform of rotateX(-90deg)

Post Comment or Questions

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

Your email address will not be published. Required fields are marked *

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.