Animated Product Card Using Html And Css Source Code

Introduction:

Today, we’re diving into a fun and refreshing project: designing a Coca-Cola Product Card using just HTML and CSS. Whether you’re new to coding or a seasoned enthusiast, this project is perfect for adding a splash of creativity to your skillset.

We’ll use HTML to build the structure of our product card and CSS to style it with that classic Coca-Cola flair. This hands-on guide is not only simple but also engaging, offering a delightful experience as we recreate the iconic Coca-Cola vibe.

Coca-Cola Product Card Overview:

This section gives a brief description of the Coca-Cola product card, highlighting its main interactive features and visual elements.

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CocaCola Product Card - codingstella </title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="card">
  <div class="circle" style="--clr: #f40103">
    <img src="http://codingstella.com/wp-content/uploads/2024/01/download-14.png" class="logo">
  </div>
  <div class="content">
    <h2>CocoCola</h2>
    <p>CocoCola is a refreshing beverage that quenches your thirst and tantalizes your taste buds. </br>Our secret blend of flavors.</p>
    <a href="#">Explore More</a>
  </div>
  <img src="http://codingstella.com/wp-content/uploads/2024/01/download-15.png" class="product_img">
</div>
<!-- partial -->
  
</body>
</html>

CSS

@import url("https://fonts.googleapis.com/css?famiyl=Poppins:200,300,400,500,600,700,800,900&display=swap");
* {
  margin: 10;
  padding-right: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #151515;
}
.card {
  position: relative;
  width: 350px;
  height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
  transition-delay: 0.5s;
}
.card:hover {
  width: 600px;
  transition-delay: 0.5s;
}
.card .circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card .circle::before {
  content: "";
  position: absolute;
  top: 30;
  left: 2;
  right: 2;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: #191919;
  border: 8px solid var(--clr);
  filter: drop-shadow(0 0 10px var(--clr)) drop-shadow(0 0 60px var(--clr));
  transition: 0.5s, background 0.5s;
  transition-delay: 0.75s, 1s;
}
.card:hover .circle::before {
  transition-delay: 0.5s;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background: var(--clr);
}
.card .circle .logo {
  position: relative;
  width: 250px;
  transition: 0.5s;
  transition-delay: 0.5s;
}
.card:hover .circle .logo {
  transform: scale(0);
  transition-delay: 0s;
}
.card .product_img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0) rotate(315deg);
  height: 300px;
  transition: 0.5s ease-in-out;
}
.card:hover .product_img {
  transition-delay: 0.75s;
  top: 25%;
  left: 72%;
  height: 500px;
  transform: translate(-50%, -50%) scale(1) rotate(15deg);
}
.card .content {
  position: absolute;
  width: 50%;
  left: 20%;
  padding: 20px 20px 20px 20px;
  opacity: 0;
  transition: 0.5s;
  visibility: hidden;
}
.card:hover .content {
  transition-delay: 0.75s;
  opacity: 1;
  visibility: visible;
  left: 20px;
}
.card .content h2 {
  color: #fff;
  text-transform: uppercase;
  font-size: 2.5em;
  line-height: 1em;
}
.card .content p {
  color: #fff;
}
.card .content a {
  position: relative;
  color: #111;
  background: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  margin-top: 10px;
}

Hover Effects and Animation

When the user hovers over the card:

Logo Transformation: The circular logo scales down, making space for the product image to take the spotlight.
Product Image Animation: The image of the Coca-Cola bottle expands, rotates, and moves to a new position, creating a dynamic transition.
Content Reveal: The product name, a brief description, and an “Explore More” button smoothly appear, providing more information and an option for further interaction.

Conclusion

The Coca-Cola product card is a visually engaging and interactive design that uses smooth animations and transitions to enhance user experience. By incorporating dynamic hover effects, it highlights the product’s features in an eye-catching and professional manner, making it an effective tool for showcasing products online. The use of vibrant colors and fluid motion captures attention, while the clean layout and concise information keep the user informed and intrigued.

Post Views: 71