Close

Credit card with animation hover effect

This is an example of a credit card template with a hover animation, designed using CSS, HTML, and Bootstrap framework 4. The image of the credit card is imported to the code using its URL. The form is given a height of 100vh, and background color of #E1F5FE. The credit card is given a style set of padding as 10px, width as 350px, height as 80px, and border-radius as 10px. The card type is displayed using the styles of font color as #ccc, and font-size as 15px. The card number is displayed using the styled of line-height as 17px, and font color as #ccc. The upper section of the card is given an animation style of height 1s ease-in forwards, whereas the card-details section is given the styles of card-details 1.5s ease-in forwards. In a hover event, the card number takes the styles of top as 45%, and position as relative. Source: https://bbbootstrap.com/snippets/bootstrap-credit-card-animation-hover-effect-12294813

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.