Close

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. Source: https://bbbootstrap.com/snippets/shop-brand-hover-animation-21837534

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.