Creating a Creative Product Cards using HTML and CSS Tutorial

Submitted by oretnom23 on Wednesday, May 3, 2023 - 16:35.

In this tutorial, you can learn to create simple and creative Product Cards with Overlaying Product details using HTML and CSS. This tutorial aims to provide students and beginners with a reference for building an interactive and responsive user interface for eCommerce websites. Here, I will be providing a simple web page script that demonstrates the creation of simple product cards UI.

What are Product Cards?

The Product Cards is the user interface component of a website that is often implemented in eCommerce System or Websites. This kind of UI component displays the site products in a grid view and commonly contains the product image, name, price, category, and other details. It also contains some options or buttons to allow the users to add the product to the cart or view the full details about the product.

How to Create Product Cards?

Product Cards can be easily achieved using HTML and CSS. Using HTML, we can use some elements such as div tags to create the card wrapper, the card itself, and the elements for other contents. Then, using CSS, we can design the cards the way we desire the product cards should look. Check out the scripts that I created and provided below to have a better idea.

Sample Web Page Scripts

The following scripts result in a simple web page that contains product cards that are displayed in a grid view. By default, only the product images are shown on each card. When the user hovers the mouse over the specific product card, the product details will slide up and overlay over the product image. On the product details, product names and descriptions are truncated. The title will cut and show an ellipsis if the title text content is over 2 lines while the description is only 1 line.

HTML

Here's the HTML file script known as index.html. It contains the page layout, product card wrapper, product cards, and product card details elements. Kindly replace the image path with the ones that are available on your end.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Creative Product Cards with Overlay Details</title>
  7.     <link rel="stylesheet" href="style.css">
  8.     <link rel="preconnect" href="https://fonts.googleapis.com">
  9.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  10.     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
  11. </head>
  12. <body>
  13.     <div class="container">
  14.         <h1 id="page-title">Creative Product Cards with Overlay Details using HTML and CSS</h1>
  15.         <hr id="title_hr">
  16.         <div class="product-list">
  17.             <div class="product-card">
  18.                 <div class="product-img">
  19.                     <img src="./products/nike-jordan.png" alt="Sample Shoes">
  20.                 </div>
  21.                 <div class="product-details">
  22.                     <div class="product-price"><span class="material-symbols-outlined">sell</span> $131.92</div>
  23.                     <div class="product-name">Air Jordan 1 Low x Eastside Golf</div>
  24.                     <div class="product-brand">Nike</div>
  25.                     <div class="product-description">Nike Men's Shoes</div>
  26.                     <div class="product-btns">
  27.                         <button class="product-btn add-to-cart" title="Add to Cart"><span class="material-symbols-outlined">add_shopping_cart</span> Add</button>
  28.                         <button class="product-btn view-prod" title="View More Details">View</button>
  29.                     </div>
  30.                 </div>
  31.             </div>
  32.             <div class="product-card">
  33.                 <div class="product-img">
  34.                     <img src="./products/vans-old-skool.png" alt="Sample Shoes">
  35.                 </div>
  36.                 <div class="product-details">
  37.                     <div class="product-price"><span class="material-symbols-outlined">sell</span> $70.00</div>
  38.                     <div class="product-name">Old Skool</div>
  39.                     <div class="product-brand">Vans</div>
  40.                     <div class="product-description">Vans Old Skool Black Shoes</div>
  41.                     <div class="product-btns">
  42.                         <button class="product-btn add-to-cart" title="Add to Cart"><span class="material-symbols-outlined">add_shopping_cart</span> Add</button>
  43.                         <button class="product-btn view-prod" title="View More Details">View</button>
  44.                     </div>
  45.                 </div>
  46.             </div>
  47.             <div class="product-card">
  48.                 <div class="product-img">
  49.                     <img src="./products/adidas.png" alt="Sample Shoes">
  50.                 </div>
  51.                 <div class="product-details">
  52.                     <div class="product-price"><span class="material-symbols-outlined">sell</span> $131.92</div>
  53.                     <div class="product-name">Matchbreak Super Shoes</div>
  54.                     <div class="product-brand">Adidas</div>
  55.                     <div class="product-description">Adidas Men's Matchbreak Super Shoes</div>
  56.                     <div class="product-btns">
  57.                         <button class="product-btn add-to-cart" title="Add to Cart"><span class="material-symbols-outlined">add_shopping_cart</span> Add</button>
  58.                         <button class="product-btn view-prod" title="View More Details">View</button>
  59.                     </div>
  60.                 </div>
  61.             </div>
  62.         </div>
  63.     </div>
  64. </body>
  65. </html>

Stylesheet

Then, here's the CSS file script known as style.css. This file contains the codes of the page layout and some elements designs. Here, you can see the scripts that design the product cards and the overlaying product details.

  1. @import url('https://fonts.googleapis.com/css2?family=Dongle:wght@300;400;700&family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet');
  2. *{
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6.     font-family: 'Dongle', sans-serif;
  7.     font-family: 'Roboto Mono', monospace;
  8. }
  9. ::selection{
  10.     color: #fff;
  11.     background: #4db2ec;
  12. }
  13. body{
  14.     display: flex;
  15.     align-items: center;
  16.     justify-content: center;
  17.     min-height: 100vh;
  18.     background: #4facfe;
  19.     background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
  20.     padding: 2em 0;
  21. }
  22. #page-title{
  23.     color: #fff;
  24.     text-align: center;
  25.     font-weight: 500;
  26.     text-shadow: 0px 0px 15px #0000003a;
  27. }
  28. #title_hr{
  29.     width:60px;
  30.     border: 2px solid #ffffff;
  31.     margin: .35em auto;
  32. }
  33. @media (min-width: 780px){
  34.     #page-title{
  35.     width: 780px;
  36.     }
  37. }
  38. /* Product List */
  39. .product-list{
  40.     width: 780px;
  41.     display: grid;
  42.     grid-template-columns: repeat(3, 1fr);
  43.     grid-gap:10px;
  44.     margin:2em auto;
  45. }
  46.  
  47. @media (max-width: 780px){
  48.     .product-list{
  49.     width: 98%;
  50.     grid-template-columns: repeat(2, 1fr);
  51.     }
  52. }
  53. @media (max-width: 500px){
  54.     .product-list{
  55.     width: 100%;
  56.     grid-template-columns: repeat(1, 1fr);
  57.     }
  58. }
  59.  
  60. /* Product Card */
  61. .product-card{
  62.     position: relative;
  63.     width: 250px;
  64.     background-color: #fff;
  65.     border: 1px solid #b3b3b3;
  66.     box-shadow: 1px 1px 10px #0000003b;
  67.     overflow: hidden;
  68.     margin: .35em auto;
  69. }
  70. @media (max-width: 780px){
  71.     .product-card{
  72.     width: 98%;
  73.     }
  74. }
  75.  
  76. /* Product Image */
  77. .product-card .product-img{
  78.     width: 100%;
  79.     height: 250px;
  80.     overflow: hidden;
  81. }
  82. .product-card .product-img>img{
  83.     width: 100%;
  84.     height: 100%;
  85.     object-fit: cover;
  86.     object-position: center center;
  87.     transition: all .3s ease-in-out;
  88. }
  89. .product-card:hover .product-img>img{
  90.     transform: scale(2);
  91.     object-position: center center;
  92. }
  93.  
  94. /* Product Details */
  95. .product-card .product-details {
  96.     position: absolute;
  97.     bottom: 0;
  98.     left: 0;
  99.     width: 100%;
  100.     background: #fff;
  101.     padding: 0.5em 0.35em;
  102.     transform: translateY(100%);
  103.     transition: .3s ease-in-out;
  104. }
  105. .product-card:hover .product-details{
  106.     transform: translateY(0%);
  107. }
  108.  
  109. /* Product Price */
  110. .product-card .product-price {
  111.     text-align: right;
  112.     font-size: .8rem;
  113.     font-weight: 500;
  114.     color: #878787;
  115. }
  116.  
  117. .product-card .product-price>span.material-symbols-outlined{
  118.     line-height: .8rem;
  119.     font-size: .8rem;
  120.     font-weight: 500;
  121. }
  122.  
  123. .product-card .product-name {
  124.     font-size: 1.2rem;
  125.     color: #424242;
  126.     font-weight: 500;
  127.     text-overflow: ellipsis;
  128.     overflow-y: hidden;
  129.     display: -webkit-box;
  130.     -webkit-line-clamp: 2;
  131.     -webkit-box-orient: vertical;
  132. }
  133.  
  134. /* Product Brand */
  135. .product-card .product-brand {
  136.     font-size: .9rem;
  137.     color: #6e6d6d;
  138.     font-weight: 400;
  139. }
  140.  
  141. /* Product Description */
  142. .product-card .product-description {
  143.     margin: 0.15em 0;
  144.     font-size: .9rem;
  145.     color: #424242;
  146.     text-overflow: ellipsis;
  147.     overflow-y: hidden;
  148.     display: -webkit-box;
  149.     -webkit-line-clamp: 1;
  150.     -webkit-box-orient: vertical;
  151. }
  152.  
  153. /* Product Btns */
  154. .product-card .product-btns {
  155.     display: flex;
  156.     flex-wrap: wrap;
  157.     width: 100%;
  158.     justify-content: space-evenly;
  159. }
  160.  
  161. /* Product Btns */
  162. .product-card button.product-btn {
  163.     background: transparent;
  164.     padding: 0.35em 1em;
  165.     outline: none;
  166.     cursor: pointer;
  167. }
  168. .product-card button.product-btn>span{
  169.     font-size:.9rem;
  170. }
  171.  
  172. .product-card button.product-btn.add-to-cart {
  173.     border: 2px solid #0180ff;
  174.     color: #0180ff;
  175. }
  176.  
  177. .product-card button.product-btn.add-to-cart:hover {
  178.     border: 2px solid #43a0fc;
  179.     color: #43a0fc;
  180. }
  181.  
  182. .product-card button.product-btn.view-prod {
  183.     border: 2px solid #6c6c6c;
  184.     color: #6c6c6c;
  185. }
  186. .product-card button.product-btn.view-prod:hover {
  187.     border: 2px solid #494949;
  188.     color: #494949;
  189. }

Snapshots

Here are some snapshots of the overall result of the scripts I have provided above.

Page UI

Creative Product Cards using HTML and CSS Tutorial

Product List

Creative Product Cards using HTML and CSS Tutorial

Product Card (not hovered)

Creative Product Cards using HTML and CSS Tutorial

Product Card (hovered)

Creative Product Cards using HTML and CSS Tutorial

DEMO VIDEO

There you go! I have also provided the completed source code zip file including the images I used on this website and it is free to download. The download button can be found below this tutorial's content. Feel free to download and modify the source code to do some experiments and enhancements.

That's it! I hope this Creating a Creative Product Cards using HTML and CSS Tutorial will help you with what you are looking for and you'll find this useful for your current and future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding =)

Tags

Comments

Submitted byqwehh (not verified)on Thu, 07/04/2024 - 16:13

thankx

Add new comment

About text formats