Card Hover Interactions
This is an example of an image card layout form with hover effects, designed using HTML, CSS, and Bootstrap framework 4. Media queries have been used to increase the responsiveness of the form, whereas the fonts and images are imported to the code with their URLs. The font sizes are predefined as --font-sans: 'Rubik', sans-serif, and --font-serif: 'Cardo', serif. The image cards are placed in a grid layout. The page content is given the styles of display as grid, grid-gap as 1rem, padding as 1rem, max-width as 1024px, and font-family as var(--font-sans). The title of the card has the styles of font-size as 1.3rem, font-weight as bold, and line-height as 1.2. The card description has the styles of font-family as var(--font-serif), font-size as 1.125rem, font-style as italic, and line-height as 1.35, whereas the button is given the styles of cursor as pointer to get the hand cursor effect, margin-top as 1.5rem, padding as 0.75rem 1.5rem, font-size as 0.65rem, and text-transform as uppercase to convert the text to uppercase. The button takes the background color of lighten(black, 5%), in a hover event and outline of 1px dashed yellow, in a focus event. The image cards take a transforming effect of translateY(-50%), in a hover event.