Shop by brand on hover animation
This is an example of a set of cards which takes an expanding animation, in a hover event. It is designed using CSS, HTML, and Bootstrap framework 4. The card images are imported to the code with their URLs. The body of the form is given a background color of #FFFACD. The title is given a style set of font-weight as 100, text-align as center to bring the text the center of the form, font-size as 40px, font-family as "Times New Roman", Times, serif. The card list title is displayed using a font-size of 20px, and an opacity of 0.8. The card list is given a display style as block, opacity as 1, transition style as 0.25s ease-in-out opacity, 0.25s ease-in-out filter, and the pointer style as cursor to get the hand cursor effect in a hover event. In a hover event, the three cards in the card list, take transform and rotate effects to create the expanding effect, individually. The rest of the cards take a filter of grayscale(100%), and opacity of 0.25, while the cursor is placed over one card set, making the selected card list highlighted and the others blurred.