product card hover effect

Product Card with Hover Effect

Table of Contents

Introduction of Product Card Hover Effect

Hey developers, we are here again to present you our new and amazing project of Product Card Hover Effect with the help of HTML and CSS. In this project, there will be a card on which an image of a product will be displayed. Along with some information like the name of the product. Its availability in different colors, its price, and the button to buy it now. When the user hovers over the card, the background design of the color. The position of the product will change, and the background color of the button will also change.

Now let’s start making this project with the help of HTML (HHyper Text Markup Language) and CSS (CCascading Style Sheet). The code of this project will not be very complicated if you focus on it carefully. You can understand it without any problems. This is very useful, as you have already seen this type of product card on any online shopping website to show their product details. This is a compulsory requirement for any shopkeeper to show their product details on their website. So if you have an online shopping website, then you are in the right place.

HTML (Hypertext Markup Language)

First, we will make the structure of the Product Card with Hover Effect with the help of HTML (the Hyper Text Markup Language is used to make the structure of the web page). In this code, we will create a parent div that contains. The full details of the product and a child div to give it positions in CSS. Then we will make a div for the image, in which the image will be inserted in the img tag (which is used to insert the image), and then another parent div.

In the parent div, there will be two child divs, one for the heading of the product, color availability and another for the price and buy button. In the first div, there will be the heading of the product in the h1 tag (which is used to give the heading). Three small divs for making color choices using CSS, and another div for the price and buy button. We will apply the hovering effect to the buy button.

<!DOCTYPE html>

<html>

<head>

  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet">

  <title></title>

  <link rel="stylesheet" href="./style.css">
</head>

<body>

<div class="container">

  <div class="card">

    <div class="imgbox">

      <img class="image" src="headephone.png">

    </div>

    <div class="contentbox">

      <h2>Head phone</h2>

      <div class="color">

        <h3>color :</h3>

        <span></span>

        <span></span>

        <span></span>

      </div>

      <div class="price">

        <h3>price :</h3>

        <span>$</span>

        <span>2</span>

        <span>0</span>

        <span>0</span>

      </div>

      <a href="#">Buy Now</a>

    </div>

  </div>

</div>

</body>

</html>

CSS (Cascading Stylesheet)

After making the structure of the Product Card Hover Effect, we will give it styling with the help of CSS (Cascading Stylesheet is used to give styling to the web page by writing it in an external file). In this, we will give the background black. Place the parent div of the card in the center of the screen. Now we will move toward the main styling of the product card.

In the parent div, we will adjust the size and position of the Product Card with Hover Effect. The background styling given to it by giving the background color using the before property to design the card. Now we will set the position of the image by taking it down from the top some pixels in default case. Then we will design the heading and color divs in which we will give the background color. We will also add styling to the price and button sections. When the user hovers, then the image will go to the top of the card. The background color of the button will change.

 

    *{

        margin: 0;
  
        padding: 0;
  
        font-family: 'Poppins', sans-serif;
  
      }
  
      body{
  
        display: flex;
  
        justify-content: center;
  
        align-items: center;
  
        min-height: 100vh;
  
        background-color: #151F28;
  
      }
  
      .container{
  
        position: relative;
  
        margin: 0 20px;
  
      }
  
      .container .card{
  
        position: relative;
  
        width: 320px;
  
        height: 450px;
  
        background-color: #232323;
  
        border-radius: 20px;
  
        overflow: hidden;
  
      }
  
      .container .card:before{
  
        content: '';
  
        position: absolute;
  
        top: 0;
  
        left: 0;
  
        width: 100%;
  
        height: 100%;
  
        background-color: #03A9F4;
  
        clip-path: circle(150px at 80%  20%);
  
        transition: 0.5s ease-in-out;
  
      }
  
      .container .card:hover:before{
  
        clip-path: circle(300px at 80% -20%);
  
      }
  
      .container .card .imgbox{
  
        position: absolute;
  
        top: 50%;
  
        transform: translateY(-50%);
  
        z-index: 10000;
  
        width: 100%;
  
        height: 220px;
  
        transition: 0.5s;
  
      }
  
      .container .card:hover .imgbox{
  
        top: 0;
  
        transform: translateY(0%);
  
      }
  
      .container .card .imgbox img{
  
        position: absolute;
  
        top: 50%;
  
        left: 50%;
  
        transform: translate(-50%,-50%);
  
        width: 170px;
  
      }
  
   .container .card .contentbox {
  
    position: absolute;
  
    bottom: 0;
  
    width: 100%;
  
    height: 100px;
  
    text-align: center;
  
    transition: 1s;
  
    z-index: 10;
  
  }
  
  
  
  .container .card:hover .contentbox {
  
    height: 210px;
  
  }
  
  
  
  .container .card .contentbox h2 {
  
    position: relative;
  
    font-weight: bold;
  
    letter-spacing: 1px;
  
    color: #FFFFFF;
  
  }
  
  
  
  .container .card .contentbox .price, 
  
  .container .card .contentbox .color {
  
    display: flex;
  
    justify-content: center;
  
    align-items: center;
  
    padding: 8px 20px;
  
    transition: 0.5s;
  
    opacity: 0;
  
    visibility: hidden;
  
  }
  
  
  
  .container .card:hover .contentbox .price {
  
    opacity: 1;
  
    visibility: visible;
  
    transition-delay: 0.5s;
  
  }
  
  
  
  .container .card:hover .contentbox .color {
  
    opacity: 1;
  
    visibility: visible;
  
    transition-delay: 0.6s;
  
  }
  
  
  
  .container .card .contentbox .price h3, 
  
  .container .card .contentbox .color h3 {
  
    color: #FFFFFF;
  
    font-weight: 300;
  
    font-size: 14px;
  
    text-transform: uppercase;
  
    letter-spacing: 2px;
  
    margin-right: 10px;
  
  }
  
      .container .card .contentbox .price span{
  
        width: 26px;
  
        height: 26px;
  
        text-align: center;
  
        line-height: 26px;
  
        font-size: 20px;
  
        display: inline-block;
  
        color: #111111;
  
        background-color: #FFFFFF;
  
        margin: 0 5px;
  
        transition: 0.5s;
  
        border-radius: 4px;
  
        cursor: pointer;
  
        font-weight: bold;
        
  
      }
  
      .container .card .contentbox .price span:hover{
  
        background-color: #03A9F4;
  
      }
  
      .container .card .contentbox .color span{
  
        width: 20px;
  
        height: 20px;
  
       background: #FF0;
  
        border-radius: 50%;
  
        margin: 0 5px;
  
        cursor: pointer;
        
  
      }
  
      .container .card .contentbox .color span:nth-child(2){
  
        background-color: #9BDC28;
  
      }
  
      .container .card .contentbox .color span:nth-child(3){
  
        background-color: #03A9F4;
  
      }
  
      .container .card .contentbox .color span:nth-child(4){
  
        background-color: #E91E63;
  
      }
  
       .container .card .contentbox a{
  
        display: inline-block;
  
        padding: 10px 20px;
  
        background-color: #FFFFFF;
  
        border-radius: 4px;
  
        margin-top: 10px;
  
        text-decoration: none;
  
        font-weight: bold;
  
        color: #111111;
  
        opacity: 0;
  
        transform: translateY(50px);
  
        transition: 0.5s;
  
       }
  
       .container .card:hover .contentbox a{
  
        opacity: 1;
  
        transform: translateY(0px);
  
        transition-delay: 0.75s;
  
       }
  
       .image{width: 320px;}
  
  
    

Output of Product Card Hover Effect

Finally, we have made the Product Card Hover Effect with the help of the simple and easy code of HTML and CSS, step by step. I hope this project will be beneficial for you. If you have any doubt, you can contact us through the details given in the footer of the web page. If you want the source code, then click on the button given below to download it.

product card hover effect

For more explanation, click on the link given below.

You can also check:

Leave a Reply

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

Follow Us

Latest Posts

Quick Links