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

Text Overlay Image Slider
| |

Text Overlay Image Slider in HTML, CSS and JavaScript

Text overlay image slider in HTML, CSS, and JavaScript is an effective technique to create appealing images with textual descriptions. This type of slider increases the engaging factor of your site and looks professional at the same time. In this article, I will include free source codes for the text overlay image slider interested readers…

Quad Image Gallery
| |

Smooth Quad Image Gallery in HTML, CSS and JavaScript

When developing a webpage, it is always important to have image gallery which creates a good impression on the visitors. Today, I’m glad to present the Smooth Quad Image Gallery created in HTML, CSS, JavaScript. This elegant & optimized gallery is suitable for business and personal websites, and I’m giving you the complete source code…

3d Rotating Image Gallery
| |

Create a 3D Rotating Image Gallery in HTML, CSS and JavaScript

Creating engaging and artistic features when it comes to website design is very important in order to attract the attention of the visitors. Some of these are the 3D Rotating Image Gallery which you could find to be really interesting in making your web pages stand out. In this article, I will be glad to…

Leave a Reply

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