Product Card with hover effect using HTML and CSS

Share your love

Welcome to our latest blog post, where we’re diving into the world of web design with a focus on interactivity. Today, we’re unveiling the secrets behind creating captivating product cards using HTML and CSS, complete with a mesmerizing hover effect.

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

Demo

See the Pen CSS Product Card Hover Effect | Cocacola Card UI Design by nicogdm (@nicogdm) on CodePen.

HTML Code 

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Product Card with hover effect using HTML and CSS - Coding Torque</title>
</head>

<body>
    <!-- Further code here -->

    <script src="script.js"></script>
</body>

</html>

Paste the below code in your <body> tag.

<div>
  <html>

  <head>
    <meta charset="utf-8">
    <title>CSS Card Hover Effects</title>
    <link rel="stylesheet" href="style2.css">
  </head>

  <body>
    <div class="card">
      <div class="circle" style="--clr:#fd7015;">
        <img src="https://d1yei2z3i6k35z.cloudfront.net/505757/63fa5902f1ab4_216x135.png" class="logo">
      </div>
      <div class="content">
        <h2>Connaissance Illimitée</h2>
        <p>Libère le superpouvoir de ton cerveau et développe une connaissance illimitée
        </p>
        <a href="#">JE VEUX MON EXEMPLAIRE</a>
      </div>
      <img src="https://d1yei2z3i6k35z.cloudfront.net/505757/63fa590e96084_5x8inch-2.png" class="product_img">
    </div>
  </body>

  </html>
</div>

CSS Code 

Create a file style.css and paste the code below.

@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@400;500;600;700;800;900&display=swap");

* {
  margin: 10px;
  padding: 0;
  box-sizing: border-box;
  font-family: "Barlow Semi Condensed", 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: 470px;
  height: 470px;
  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: 55%;
  left: 82%;
  height: 320px;
  transform: translate(-50%, -50%) scale(1) rotate(15deg);
}
.card .content {
  position: absolute;
  width: 60%;
  left: 10%;
  padding: 20px 20px 20px 20px;
  opacity: 0;
  transition: 0.5s;
  visibility: hidden;
}
.card:hover .content {
  transition-delay: 0.75s;
  opacity: 1;
  visibility: visible;
  left: 3px;
  margin-top: 15px;
}
.card .content h2 {
  color: #fff;
  text-transform: uppercase;
  font-size: 2em;
  line-height: 1.3em;
}
.card .content p {
  color: #fff;
}
.card .content a {
  position: relative;
  color: #fff;
  background: #222222;
  padding: 10px 20px;
  border-radius: 10px;
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  margin-top: 15px;
}

Final Output

Written by: Piyush Patil

Code Credits: https://codepen.io/nicogdm/pen/jOvMJQq

If you found any mistakes or have any doubts please feel free to Contact Us

Hope you find this post helpful💖

Tags
Share your love

Related Posts