Close Menu
    HTML & CSS

    How to make Shoes Product Card Animation using HTML & CSS

    Coding StellaBy No Comments4 Mins Read

    Let’s create a stylish and interactive Shoes Product Card using HTML and CSS! This card will not only showcase a shoe’s image, name, and price but will also feature cool hover animations like image scaling, smooth text transitions, and glowing effects.

    We’ll use HTML to build the card’s structure and CSS to add attractive designs and animations. This project is perfect for learning how to create modern UI elements and add interactive effects without JavaScript. Let’s make your product cards look amazing!

    HTML :

    This HTML creates a stylish shoe product card layout with images, product names, old and new prices, and interactive heart and cart icons — it uses a grid system for alignment and links to an external CSS file for styling and animations.

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

</head>
<body>

    <h1 class="title-shop">SHOP</h1>
    <main class="main bd-grid">
        <article class="card">
            <div class="card-img">
                <img src="/images/img1.png" alt="image">
            </div>

            <div class="card-name">
                <p>AIR ZOOM PEGASUS</p>
            </div>

            <div class="card-prices">
                <a href="#" class="card-icon"><ion-icon name="heart-outline"></ion-icon></a>
                <div>
                    <span class="card-price card-price-before">$990.00</span>
                    <span class="card-price card-price-now">$749.00</span>
                </div>
                <a href="#" class="card-icon"><ion-icon name="cart-outline"></ion-icon></a>
            </div>
        </article>

        <article class="card">
            <div class="card-img">
                <img src="/images/img2.png" alt="image">
            </div>

            <div class="card-name">
                <p>AIR ZOOM PEGASUS</p>
            </div>

            <div class="card-prices">
                <a href="#" class="card-icon"><ion-icon name="heart-outline"></ion-icon></a>
                <div>
                    <span class="card-price card-price-before">$990.00</span>
                    <span class="card-price card-price-now">$749.00</span>
                </div>
                <a href="#" class="card-icon"><ion-icon name="cart-outline"></ion-icon></a>
            </div>
        </article>

        <article class="card">
            <div class="card-img">
                <img src="/images/img3.png" alt="image">
            </div>

            <div class="card-name">
                <p>AIR ZOOM PEGASUS</p>
            </div>

            <div class="card-prices">
                <a href="#" class="card-icon"><ion-icon name="heart-outline"></ion-icon></a>
                <div>
                    <span class="card-price card-price-before">$990.00</span>
                    <span class="card-price card-price-now">$749.00</span>
                </div>
                <a href="#" class="card-icon"><ion-icon name="cart-outline"></ion-icon></a>
            </div>
        </article>

        <article class="card">
            <div class="card-img">
                <img src="/images/img4.png" alt="image">
            </div>

            <div class="card-name">
                <p>AIR ZOOM PEGASUS</p>
            </div>

            <div class="card-prices">
                <a href="#" class="card-icon"><ion-icon name="heart-outline"></ion-icon></a>
                <div>
                    <span class="card-price card-price-before">$990.00</span>
                    <span class="card-price card-price-now">$749.00</span>
                </div>
                <a href="#" class="card-icon"><ion-icon name="cart-outline"></ion-icon></a>
            </div>
        </article>
    </main>

    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</body>
</html>

    CSS :

    This CSS code creates a clean, responsive product card layout with a modern design — it imports the “Open Sans” font, sets global color and font-size variables, and defines a grid system for aligning elements; the card has hover effects like shadow, image rotation, and smooth transitions, with different background colors for each card and nicely styled pricing details.

    @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

:root {
  --first-color: #fcf1ff;
  --second-color: #e3f8ff;
  --third-color: #ffe8df;
  --forth-color: #e0dfff;
  --accent-color: #ff5151;
  --dark-color: #161616;

  --body-font: "Open Sans";
  --h1-font-size: 1.5rem;
  --h3-font-size: 1rem;
  --normal-font-size: 0.938rem;
  --smaller-font-size: 0.75rem;
}

@media screen and (min-width: 768px) {
  :root {
    --h1-font-size: 2rem;
    --normal-font-size: 1rem;
    --smaller-font-size: 0.813rem;
  }
}

*,
::after,
::before {
  box-sizing: border-box;
}

body {
  margin: 2rem 0 0 0;
  background-color: #fff;
  color: var(--dark-color);
  font-family: var(--body-font);
}

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
}

main {
  padding: 2rem 0;
}

.bd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-width: 1200px;
  margin-left: 2.5rem;
  margin-right: 2.5rem;
  align-items: center;
  gap: 2rem;
}

.title-shop {
  position: relative;
  margin: 0 2.5rem;
}

.title-shop::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 72px;
  height: 2px;
  background-color: var(--dark-color);
  margin-left: 0.25rem;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 2rem;
  border-radius: 1rem;
  overflow: hidden;
}

.card:hover {
  box-shadow: 0 0.5rem 1rem #d1d9e6;
}

.card:hover .card-name {
  left: 0;
}

.card:hover .card-img {
  transform: rotate(30deg);
  margin-left: 3.5rem;
}

.card:hover .card-prices {
  margin-left: 3.5rem;
  padding: 0 1.5rem;
}

article:nth-child(1) {
  background-color: var(--first-color);
}
article:nth-child(2) {
  background-color: var(--second-color);
}
article:nth-child(3) {
  background-color: var(--third-color);
}
article:nth-child(4) {
  background-color: var(--forth-color);
}

.card-img {
  width: 180px;
  height: auto;
  padding: 3rem 0;
  transition: 0.5s;
}

.card-name {
  position: absolute;
  left: -25%;
  top: 0;
  width: 3.5rem;
  height: 100%;
  text-align: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  background-color: var(--dark-color);
  color: #fff;
  font-weight: bold;
  transition: 0.5s;
}

.card-icon {
  font-size: 1.5rem;
  color: var(--dark-color);
}

.card-icon:hover {
  color: var(--accent-color);
}

.card-prices {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.5s;
}

.card-price {
  display: block;
  text-align: center;
}

.card-price-before {
  font-size: var(--smaller-font-size);
  color: var(--accent-color);
  margin-bottom: 0.25rem;
  text-decoration: line-through;
}

.card-price-now {
  font-size: var(--h3-font-size);
  font-weight: bold;
}

@media screen and (min-width: 1200px) {
  body {
    margin: 3rem 0 0 0;
  }

  .title-shop {
    margin: 0.5rem;
  }

  .bd-grid {
    margin-left: auto;
    margin-right: auto;
  }
}

    With just HTML and CSS, we’ve built a sleek and animated Shoes Product Card that’s perfect for e-commerce websites. The smooth hover effects make it more engaging and visually appealing. You can customize it with different styles and products to fit your website’s theme. Keep creating and keep learning! 🥳👟

    If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!

    Share.

    Related Posts

    Add A Comment
    Leave A Reply