Product Card With Quick View Popup Effect

Product Card With Quick View Popup Effect in HTML, CSS and JavaScript

Byjvcodes

In this article, I will give you the free source code to build Product Card With Quick View Popup Effect in HTML, CSS, & JS. This is an innovative feature which facilitates a preview of certain details without switching to another page – perfect for modern eCommerce websites.

In this article, I will explain how you can include a clean and stylish product card with fast view ‘popup’ effect to your work without any efforts.

Want free codes for stunning image sliders? Dive in now!

Features

No matter if you are setting up an online store or displaying products in a portfolio site, this product card can easily be implemented on your site and adapted according to your needs. Here are some of its features:

  • Quick View Popup: Consumers can simply tap on a card to see enlarged product descriptions without having to navigate to a different page.
  • Responsive Design: It also adapts to all devices regardless of whether a consumer is using a laptop, a tablet or perhaps a phone.
  • Customizable Layout: It can be easily customized with the color and fonts consistent to that of the website or any product image.
  • CMS Friendly: This product card can easily be integrated with all current CMS like WordPress, Joomla, Drupal, and other sites which are based on HTML.

Technologies Used

To build the Product Card With Quick View Popup Effect, the following technologies were used:

  • HTML
  • CSS
  • JavaScript (JS)

Video Preview

Here is a video preview of the Product Card, as how it works and how a user would be able to navigate in the quick view popup.

Video thumbnail Watch on YouTube

Steps to Build Card

Here are the procedures for constructing the Product Card With Quick View Popup Effect. These simple instructions will help you set up the product card quickly and easily:

  • Create a Project Folder: First of all, open a new folder for your project and let’s name it product-card-project. This will be the repository for all the files of your product card.
  • Create an Images Folder: It is recommended that inside your project folder you create a sub-folder, images, that shall contain the product images needed for the card.
  • Create the HTML File: In the folder of the project, the creation of index.html should be made.
  • Create the CSS File: In the same folder, make a style.css file. This file will customize the look of the product card and the quick view popup for a more professional one.
  • Create the JavaScript File: Finally, develop a script.js file in order to implement the features related to the quick view popup including its opening and closing.

To implement code you may need VS Code Installation.

HTML

Here is the HTML code for your index.html file.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>JV Product Card With Quick View Popup Effect</title>
   
   <!-- font awesome cdn link  -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

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

   <!-- custom js file link  -->
   <script src="script.js" defer></script>

</head>
<body>
   
<div class="container">

   <h3 class="title"> Animal Shop </h3>

   <div class="products-container">

      <div class="product" data-name="p-1">
         <img src="images/1.png" alt="">
         <h3>Dog</h3>
         <div class="price">$250.00</div>
      </div>

      <div class="product" data-name="p-2">
         <img src="images/2.png" alt="">
         <h3>Parrot</h3>
         <div class="price">$84.00</div>
      </div>

      <div class="product" data-name="p-3">
         <img src="images/3.png" alt="">
         <h3>Cat</h3>
         <div class="price">$360.00</div>
      </div>

      <div class="product" data-name="p-4">
         <img src="images/4.png" alt="">
         <h3>Horse</h3>
         <div class="price">$480.00</div>
      </div>

      <div class="product" data-name="p-5">
         <img src="images/5.png" alt="">
         <h3>Snake</h3>
         <div class="price">$120.00</div>
      </div>

      <div class="product" data-name="p-6">
         <img src="images/6.png" alt="">
         <h3>Bunny</h3>
         <div class="price">$49.00</div>
      </div>

   </div>

</div>

<div class="products-preview">

   <div class="preview" data-target="p-1">
      <i class="fas fa-times"></i>
      <img src="images/1.png" alt="">
      <h3>Dog</h3>
      <div class="stars">
         <i class="fas fa-star"></i>
         <i class="fas fa-star"></i>
         <i class="fas fa-star"></i>
         <i class="fas fa-star"></i>
         <i class="fas fa-star-half-alt"></i>
         <span>( 250 )</span>
      </div>
      <p>The dog is a loyal and friendly companion known for its playful and protective nature.</p>
      <div class="price">$250.00</div>
      <div class="buttons">
         <a href="#" class="buy">buy now</a>
         <a href="#" class="cart">add to cart</a>
      </div>
   </div>

   <div class="preview" data-target="p-2">
      <i class="fas fa-times"></i>
      <img src="images/2.png" alt="">
      <h3>Parrot</h3>
      <div class="stars">
         <i class="fas fa-star"></i>
         <i class="fas fa-star"></i>
         <i class="fas fa-star"></i>
         <i class="fas fa-star"></i>
         <i class="fas fa-star-half-alt"></i>
         <span>( 250 )</span>
      </div>
      <p>Parrots are colorful and intelligent birds, known for their ability to mimic sounds and words.</p>
      <div class="price">$84.00</div>
      <div class="buttons">
         <a href="#" class="buy">buy now</a>
         <a href="#" class="cart">add to cart</a>
      </div>
   </div>

   <div class="preview" data-target="p-3">
      <i class="fas fa-times"></i>
      <img src="images/3.png" alt="">
      <h3>Cat</h3>
      <div class="stars">
         <i class="fas fa-star"></i>
         <i class="fas fa-star"></i>
         <i class="fas fa-star"></i>
         <i class="fas fa-star"></i>
         <i class="fas fa-star-half-alt"></i>
         <span>( 250 )</span>
      </div>
      <p>Cats are independent, curious creatures known for their grace and agility.</p>
      <div class="price">$360.00</div>
      <div class="buttons">
         <a href="#" class="buy">buy now</a>
         <a href="#" class="cart">add to cart</a>
      </div>
   </div>

   <div class="preview" data-target="p-4">
      <i class="fas fa-times"></i>
      <img src="images/4.png" alt="">
      <h3>Horse</h3>
      <div class="stars">
         <i class="fas fa-star"></i>
         <i class="fas fa-star"></i>
         <i class="fas fa-star"></i>
         <i class="fas fa-star"></i>
         <i class="fas fa-star-half-alt"></i>
         <span>( 250 )</span>
      </div>
      <p>Horses are majestic and powerful animals, known for their strength and endurance.</p>
      <div class="price">$480.00</div>
      <div class="buttons">
         <a href="#" class="buy">buy now</a>
         <a href="#" class="cart">add to cart</a>
      </div>
   </div>

   <div class="preview" data-target="p-5">
      <i class="fas fa-times"></i>
      <img src="images/5.png" alt="">
      <h3>Snake</h3>
      <div class="stars">
         <i class="fas fa-star"></i>
         <i class="fas fa-star"></i>
         <i class="fas fa-star"></i>
         <i class="fas fa-star"></i>
         <i class="fas fa-star-half-alt"></i>
         <span>( 250 )</span>
      </div>
      <p>Snakes are fascinating reptiles known for their sleek and smooth movement.</p>
      <div class="price">$120.00</div>
      <div class="buttons">
         <a href="#" class="buy">buy now</a>
         <a href="#" class="cart">add to cart</a>
      </div>
   </div>

   <div class="preview" data-target="p-6">
      <i class="fas fa-times"></i>
      <img src="images/6.png" alt="">
      <h3>Bunny</h3>
      <div class="stars">
         <i class="fas fa-star"></i>
         <i class="fas fa-star"></i>
         <i class="fas fa-star"></i>
         <i class="fas fa-star"></i>
         <i class="fas fa-star-half-alt"></i>
         <span>( 250 )</span>
      </div>
      <p>Bunnies are gentle and soft animals, perfect for families and small children.</p>
      <div class="price">$49.00</div>
      <div class="buttons">
         <a href="#" class="buy">buy now</a>
         <a href="#" class="cart">add to cart</a>
      </div>
   </div>

</div>

</body>
</html>

CSS

Here is the complete code for style.css file to style the card.

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600&display=swap');

*{
   font-family: 'Nunito', sans-serif;
   margin:0; padding:0;
   box-sizing: border-box;
   outline: none; border:none;
   text-decoration: none;
   transition: all .2s linear;
   text-transform: capitalize;
}

html{
   font-size: 62.5%;
   overflow-x: hidden;
}

body{
   background: #ffa6ab;
}

.container{
   max-width: 1200px;
   margin:0 auto;
   padding:3rem 2rem;
}

.container .title{
   font-size: 3.5rem;
   color:#000000;
   font-weight: bold;
   margin-bottom: 3rem;
   text-transform: uppercase;
   text-align: center;
}

.container .products-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
   gap:2rem;
}

.container .products-container .product{
   text-align: center;
   padding:3rem 2rem;
   background: #fff;
   box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
   outline: .1rem solid #ccc;
   outline-offset: -1.5rem;
   cursor: pointer;
}

.container .products-container .product:hover{
   outline: .2rem solid #222;
   outline-offset: 0;
}

.container .products-container .product img{
   height: 25rem;
}

.container .products-container .product:hover img{
   transform: scale(.9);
}

.container .products-container .product h3{
   padding:.5rem 0;
   font-size: 2rem;
   color:#444;
}

.container .products-container .product:hover h3{
   color:#c50000;
}

.container .products-container .product .price{
   font-size: 2rem;
   color:#444;
}

.products-preview{
   position: fixed;
   top:0; left:0;
   min-height: 100vh;
   width: 100%;
   background: rgba(0,0,0,.8);
   display: none;
   align-items: center;
   justify-content: center;
}

.products-preview .preview{
   display: none;
   padding:2rem;
   text-align: center;
   background: #fff;
   position: relative;
   margin:2rem;
   width: 40rem;
}

.products-preview .preview.active{
   display: inline-block;
}

.products-preview .preview img{
   height: 30rem;
}

.products-preview .preview .fa-times{
   position: absolute;
   top:1rem; right:1.5rem;
   cursor: pointer;
   color:#444;
   font-size: 4rem;
}

.products-preview .preview .fa-times:hover{
   transform: rotate(90deg);
}

.products-preview .preview h3{
   color:#444;
   padding:.5rem 0;
   font-size: 2.5rem;
}

.products-preview .preview .stars{
   padding:1rem 0;
   font-size: 1.7rem;
}

.products-preview .preview .stars i{
   color:#c50000;
}

.products-preview .preview .stars span{
   color:#999;
}

.products-preview .preview p{
   line-height: 1.5;
   padding:1rem 0;
   font-size: 1.6rem;
   color:#777;
}

.products-preview .preview .price{
   padding:1rem 0;
   font-size: 2.5rem;
   color:#c50000;
}

.products-preview .preview .buttons{
   display: flex;
   gap:1.5rem;
   flex-wrap: wrap;
   margin-top: 1rem;
}

.products-preview .preview .buttons a{
   flex:1 1 16rem;
   padding:1rem;
   font-size: 1.8rem;
   color:#444;
   border:.1rem solid #444;
}

.products-preview .preview .buttons a.cart{
   background: #444;
   color:#fff;
}

.products-preview .preview .buttons a.cart:hover{
   background: #111;
}

.products-preview .preview .buttons a.buy:hover{
   background: #444;
   color:#fff;
}


@media (max-width:991px){

   html{
      font-size: 55%;
   }

}

@media (max-width:768px){

   .products-preview .preview img{
      height: 25rem;
   }

}

@media (max-width:450px){

   html{
      font-size: 50%;
   }
}

JavaScript

Here is the complete code for script.js file to function the card.

let preveiwContainer = document.querySelector('.products-preview');
let previewBox = preveiwContainer.querySelectorAll('.preview');

document.querySelectorAll('.products-container .product').forEach(product =>{
  product.onclick = () =>{
    preveiwContainer.style.display = 'flex';
    let name = product.getAttribute('data-name');
    previewBox.forEach(preview =>{
      let target = preview.getAttribute('data-target');
      if(name == target){
        preview.classList.add('active');
      }
    });
  };
});

previewBox.forEach(close =>{
  close.querySelector('.fa-times').onclick = () =>{
    close.classList.remove('active');
    preveiwContainer.style.display = 'none';
  };
});

Download Source Code

The HTML, CSS, JS code for the Product Card With Quick View Popup Effect is available for free download. The code does not violate any copyrights hence you can modify it to suit any project.

Download Source Code

Conclusion

The Product Card With Quick View Popup Effect in HTML, CSS, JS is a very handy piece for the website particularly e-commerce platforms. It enhances customer satisfaction by enabling users to easily gain more information about a product without switching to another page.

Do not forget to attribute JV Source Codes by linking back to this page if you employ the code in your project. This contributes to the funding of the free resources such as this one. I also invite you subscribe to my YouTube channel where I upload more tutorials and provide free codes as well.

In case you face any problem, have any query or want to share any feedback, you can use the space below to post your comment. It is my pleasure to always assist and your comments are always valued.

Similar Posts

Responsive Sidebar Menu with Social Media Buttons
| | |

Responsive Sidebar Menu with Social Media Buttons Using HTML and CSS

Having an active sidebar menu using social media icon will help in enhancing the navigation of the sections in a website while having buttons to social media accounts. Here in this article, I will help you how you can create a responsive sidebar menu with proper icons and nice animation. For your convenience, you will…

Full screen Overlay Navigation Menu Bar
| | |

Full screen Overlay Navigation Menu Bar in HTML and CSS

A full-screen overlay navigation menu is one of the trendy and effective methods to improve the usability of your site. It covers the entire area of the screen and has a smooth scroll indicating different sections of a page. Here in this article, I will give you the source code for free to add a…

Glassmorphism Sidebar Menu
| | |

Glassmorphism Sidebar Menu Using HTML and CSS

Designing bright and up-to-date web environments is a best practice in web design, and Glassmorphism is one of those trends that impart a frosted-glass look. This effect contributes to the softer and sophisticated design while at the same time improves the functionality and appearance of the web. In this post let’s talk about Creating a…

Leave a Reply

Your email address will not be published. Required fields are marked *