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
<!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.
<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.
@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💖