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

HTML Code 

Starter Template

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
@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;
}
@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; }
@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💖

Share your love