CSS Animated Card
CSS Animated Card: A Creative Touch to Your Web Design
CSS animations provide a powerful way to add engaging and interactive elements to your web pages. In this blog post, we will explore how to create an animated and hover effect card using HTML and CSS. This animated card will bring life to your website by adding smooth and visually appealing transitions. So, let’s dive into the code and create a stunning CSS Animated Card!
HTML Structure:
To begin, we’ll define the basic HTML structure for our hover effect animated card. The card will consist of a container div with two child divs for the first Card Style and Second Card Style. Here’s the HTML code:
<body> <div class="card-container"> Â <div class="card"> Â <img src="sm.png" alt="card img"> Â <div class="card__content"> Â Â <p class="card__title">StudyMuch</p> Â Â <p class="card__description">Description</p> </div> </div> Â <div class="card" id="card1"> Â Â <img src="sm.png" alt="card img"> Â Â <div class="card__content" id="card1__content"> Â Â Â <p class="card__title">StudyMuch</p> Â Â Â <p class="card__description"> Description</p> Â </div> </div> </div> </body>
CSS Styling:
Now that we have the HTML structure in place, let’s add some CSS styles to create the animated card. We’ll use CSS transforms and transitions to achieve the desired effect. Here’s the CSS code:
<style> .card-container{ Â display: flex; Â flex-wrap: wrap; Â justify-content: center; align-items: center; Â Â Â } .card { Â position: relative; Â width: 300px; Â height: 200px; Â margin: 10px 20px; Â background-color: #f2f2f2; Â border-radius: 20px 0px; Â display: flex; Â align-items: center; Â justify-content: center; Â overflow: hidden; Â perspective: 1000px; Â box-shadow: 1px 2px 15px 5px #7eb4fa; Â transition: all 0.6s cubic-bezier (0.175, 0.885, 0.32, 1.275); Â Â Â } .card img { Â width: 100%; Â height: 100%; Â fill: #333; Â background-size: cover; Â background-position: center; Â transition: all 0.9s cubic-bezier (0.175, 0.885, 0.32, 1.275); Â Â Â } .card:hover { Â transform: scale(1.05); Â ox-shadow: 0 8px 16px rgba (255, 255, 255, 0.2); Â } .card__content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 20px; box-sizing: border-box; background-image: linear-gradient (to top, #09203f0%, #537895 100%); transform: rotateX(-100deg); transform-origin: top; transition: all 0.9s cubic-bezier (0.175, 0.885, 0.32, 1.275); cursor: pointer; Â } .card:hover .card__content { transform: rotateX(0deg); Â } .card__title { margin: 0; font-size: 24px; color: #ffffff; font-weight: 700; Â } .card__description { Â margin: 10px 0 0; Â font-size: 14px; Â color: #c2c2c2; Â line-height: 1.4; Â } #card1:hover img { scale: 0; Â } </style>
Explanation;
This code defines the styles for the container that holds the card elements. It sets the container to use flexbox, allowing the cards to be horizontally centered and wrap to the next line if necessary.
The overflow: hidden property hides any content that exceeds the card’s boundaries. The perspective property creates a 3D perspective for any child elements with transformed properties. The transition property defines the animation duration and timing function for the card.
The fill property sets the color of any SVG content within the image. The background-size property ensures the image covers the entire space, and background-position centers the image within the container. The transition property defines the animation duration and timing function for the image.
The transform-origin property sets the rotation origin to the top of the content. The transition property defines the animation duration and timing function for the content. The cursor: pointer property changes the cursor to a pointer shape when hovering over the content.
This code targets a specific card (#card1) and hides its image when hovered over by setting the scale property to 0.
Conclusion:
By combining HTML and CSS, we have successfully created an impressive animated card. This card incorporates hover effects, transitions, and rotations to provide an engaging and interactive user experience. Feel free to customize the content, images, colors, and dimensions to match your design requirements.
Experiment with different CSS properties, animations, and transitions to further enhance the card’s appearance and interactivity. The possibilities are endless when it comes to creating unique and captivating animated cards for your web projects.
More HTML;
1 Comment
best cheap seo services · August 10, 2023 at 10:44 am
I value the post. Will read on…