This is an example of a bootstrap grid layout used to display thumbnail details with hover effects, designed using CSS, HTML, and Bootstrap framework 4. The background images of the cards are imported to the code with their URLs. The number of grid items per row is defined as 3, and the gap between each item is set as 1, in CSS. The colors are predefined as primary-color: #333, secondary-color: #fff, and font-color: #fff. For the browser that does not support the grid layout, the background color is set as #00d2ff. The font family for the form is given as 'Roboto', sans-serif. The title of the form is given a style set of color as white, font-size as 30px, text-transform as uppercase to automatically convert the text to uppercase, and font-weight as 700, whereas the subtitle of the form is given the styles of font-size as 18px, and font-weight as 300. In a hover effect, the first card takes a transform effect of transformSkewScale (-45deg, 1), and a transition effect of (all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275)), whereas the second and third ones take transformSkewScale(45deg, 1), and transformSkewScale(45deg, 0) effects, respectively. Source:
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)