Open In App

How to Design Hover Effect for Product Info Card using HTML & CSS ?

Last Updated : 21 Mar, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

This project makes a Product info Card using HTML and CSS to display an image of the product, a description of the product, a button to order or purchase, a star rating of the product, etc. These help the users buy the product easily. There is a card at the center of the webpage. This product has a hover effect. When you hover the button, the icon of the button changes from price to shopping card. This effect is created by using the CSS transform properties.

Prerequisites

Approach

  • To make this website, you would have to make two files: an HTML file and a CSS file. Firstly create an HTML file with the name of card.html, and, another file create a CSS file with the name of cart.css.
  • Create a structured HTML page to represent the event details, schedule, and information.
  • This line sets the title of the HTML document, which appears in the browser’s title bar or tab
  • Create a `div` element with the class attribute set to “container”.it used to contain elements in the document and supply styling or layout.
  • Create a `div` element with the class attribute set to “set”. It represents a card element, typically used for displaying content in a structured manner.
  • This line creates a div element with the class attribute set to “imgBx”. It is used to contain an image associated with the product card.
  • Create an image element with the `src` attribute set to the URL of an image and the `alt` attribute alternative text for the image.
  • Create span elements containing the size options (6, 7, 8, 9, and 10).
  • Create empty span elements, presumably placeholders for color options.
  • This line creates an anchor (a) element with the text “Buy Now” and a href attribute set to “#”. It represents a link or button to purchase the product.

Example: This example shows the implementation of the above-explained approach.

HTML 
<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Product Card UI Design</title>
    <link rel="stylesheet" type="text/css"
          href="style.css">
</head>

<body>

    <div class="container">
        <!-- First Card -->
        <div class="card card1">
            <div class="imgBx">
                <img class="img" src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg" alt="GeeksForGeeks">
            </div>

            <div class="contentBx">

                <h2>Geeks Shoes</h2>

                <div class="size">
                    <h3>Size :</h3>
                    <span>6</span>
                    <span>7</span>
                    <span>8</span>
                    <span>9</span>
                    <span>10</span>
                </div>

                <div class="color">

                    <h3>Color :</h3>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <a href="#" style=
"border-radius: 10px;color: blueviolet;background-color: black;">
                  Buy Now
                  </a>
            </div>
        </div>

        <!-- Second Card -->
        <div class="card card2">
            <div class="imgBx">
                <img src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg" alt="GeeksForGeeks">
            </div>

            <div class="contentBx">

                <h2>Geeks T-Shirt</h2>

                <div class="size">
                    <h3>Size :</h3>
                    <span>S</span>
                    <span>M</span>
                    <span>L</span>
                    <span>XL</span>
                    <span>XXL</span>
                </div>

                <div class="color">

                    <h3>Color :</h3>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <a href="#" style=
"border-radius: 10px;color: blueviolet;background-color: black;">
                  Buy Now
                  </a>
            </div>
        </div>

        <!-- Third Card -->
        <div class="card card3">
            <div class="imgBx">
                <img src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg" alt="GeeksForGeeks">
            </div>

            <div class="contentBx">

                <h2>Geeks Hat</h2>

                <div class="size">
                    <h3>Size :</h3>
                    <span>One Size</span>
                </div>

                <div class="color">

                    <h3>Color :</h3>
                    <span></span>
                </div>
                <a href="#" style=
"border-radius: 10px;color: blueviolet;background-color: black;">
                  Buy Now
                  </a>
            </div>
        </div>

        <!-- Fourth Card -->
        <div style="background-color: bisque;" class="card card4">
            <div class="imgBx">
                <img src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg" alt="GeeksForGeeks">
            </div>

            <div class="contentBx">

                <h2>Geeks Shoes</h2>

                <div class="size">
                    <h3>Size :</h3>
                    <span>6</span>
                    <span>7</span>
                    <span>8</span>
                    <span>9</span>
                    <span>10</span>
                </div>

                <div class="color">

                    <h3>Color :</h3>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <a href="#" style=
"border-radius: 10px;color: blueviolet;background-color: black;">
                  Buy Now
                  </a>
            </div>
        </div>

        <!-- Fifth Card -->
        <div style="background-color: darkgray;" class="card card5">
            <div class="imgBx">
                <img src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg" 
                     alt="GeeksForGeeks">
            </div>

            <div class="contentBx">

                <h2>Geeks Shoes</h2>

                <div class="size">
                    <h3>Size :</h3>
                    <span>6</span>
                    <span>7</span>
                    <span>8</span>
                    <span>9</span>
                    <span>10</span>
                </div>

                <div class="color">

                    <h3>Color :</h3>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <a href="#" style="border-radius: 10px;
                                   color: blueviolet;
                                   background-color: black;">
                  Buy Now
                  </a>
            </div>
        </div>

        <!-- Sixth Card -->
        <div class="card card6">
            <div class="imgBx">
                <img src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg" alt="GeeksForGeeks">
            </div>

            <div class="contentBx">

                <h2>Geeks Shoes</h2>

                <div class="size">
                    <h3>Size :</h3>
                    <span>6</span>
                    <span>7</span>
                    <span>8</span>
                    <span>9</span>
                    <span>10</span>
                </div>

                <div class="color">

                    <h3>Color :</h3>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <a href="#" style="border-radius: 10px;
                                   color: blueviolet;
                                   background-color: black;">
                  Buy Now
                  </a>
            </div>
        </div>
    </div>

</body>

</html>
CSS 
/* CSS Here */

@import url('https://fonts.googleapis.com/css?family=Poppins:100,300,400,500,600,700,800, 800i, 900&display=swap');

* {
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; 
    background: #f0f0f0; 
}

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
}

.container .card {
    position: relative;
    width: 300px;
    height: 400px; 
    background: #f9f9f9; 
    border-radius: 20px;
    overflow: hidden;
    margin: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    transition: box-shadow 0.3s ease-in-out; 
}

.container .card:hover {
    transform: scale(1.05); 
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); 
}

.container .card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #c4c4c4; 
    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:after {
    content: "Geeks";
    position: absolute;
    top: 30%;
    left: -20%;
    font-size: 12em;
    font-weight: 800;
    font-style: italic;
    color: #9fe2f4;
}

.img {
    width: 100px;
    height: 100px;
}

.container .card .imgBx {
    position: absolute;
    top: 75%;
    transform: translateY(-50%);
    z-index: 1000;
    width: 100%;
    height: 100%;
    transition: .5s;
}

.container .card:hover .imgBx {
    top: 0%;
    transform: translateY(-25%);
}

.container .card .imgBx img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(20deg);
    width: 270px;
}

.container .card .contentBx {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    text-align: center;
    transition: 1s;
    z-index: 90;
}

.container .card:hover .contentBx {
    height: 210px;
}

.container .card .contentBx h2 {
    position: relative;
    font-weight: 600;
    letter-spacing: 1px;
    color: #333;
}

.container .card .contentBx .size,
.container .card .contentBx .color {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 20px;
    transition: .5s;
    opacity: 0;
    visibility: hidden;
}

.container .card:hover .contentBx .size {
    opacity: 1;
    visibility: visible;
    transition-delay: .5s;
}

.container .card:hover .contentBx .color {
    opacity: 1;
    visibility: visible;
    transition-delay: .6s;
}

.container .card .contentBx .size h3,
.container .card .contentBx .color h3 {
    color: white;
    font-weight: 300;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-right: 10px;
}

.container .card .contentBx .size span {
    width: 26px;
    height: 26px;
    text-align: center;
    line-height: 26px;
    font-size: 14px;
    display: inline-block;
    color: #111;
    background: #fff;
    margin: 0 5px;
    transition: .5s;
    border-radius: 4px;
    cursor: pointer;
}

.container .card .contentBx .size span:hover {
    background: #B90000;
}

.container .card .contentBx .color span {
    width: 20px;
    height: 20px;
    background: #ff0;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}

.container .card .contentBx .color span:nth-child(2) {
     background: #1BBFE9;
}

.container .card .contentBx .color span:nth-child(3) {
     background: #1B2FE9;
}

.container .card .contentBx .color span:nth-child(4) {
     background: #080481;
}

.container .card .contentBx a {
    display: inline-block;
    padding: 10px 20px;
    background: #fff;
    border-radius: 4px;
    margin-top: 10px;
    text-decoration: none;
    font-weight: 600;
    color: #111;
    opacity: 0;
    transform: translateY(50px);
    transition: .5s;
}

.container .card:hover .contentBx a {
    opacity: 1;
    transform: translateY(0px);
    transition-delay: .7s;
}

/* Hover effect for card1 */
.card1:before {
    clip-path: circle(150px at 80% 20%);
}

.card1:hover:before {
    clip-path: circle(300px at 80% -20%);
}

/* Hover effect for card2 */
.card.card2:before {
    clip-path: circle(100px at 50% 50%);
    background-color: #ff0000; 
}

.card.card2:hover:before {
    clip-path: circle(200px at 50% 50%);
}

/* Hover effect for card3 */
.card.card3:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 0, 0, 0.5); 
    transition: background 0.5s ease;
    z-index: 10;
    opacity: 0;
}

.card.card3:hover:before {
    opacity: 1;
}

/* Hover effect for card4 */
.card.card4:hover .contentBx {
    height: auto;
    padding: 20px;
}

.card.card4:hover .contentBx h2 {
    font-size: 24px;
}

.card.card4:hover .contentBx .size,
.card.card4:hover .contentBx .color {
    opacity: 1;
    visibility: visible;
}

.card.card4:hover .contentBx .size span,
.card.card4:hover .contentBx .color span {
    margin: 5px;
    background-color: #00ff00; 
}


/* Hover effect for card5 */
.card5:hover .contentBx {
    background-color: #1a1a1a;
}

.card5:hover .contentBx h2 {
    color: #fff;
}

.card5:hover .contentBx .size span,
.card5:hover .contentBx .color span {
    background: #fff;
    color: #000;
}

/* Hover effect for card6 */
.card6:hover {
    background-color: #ffcc00;
}

.card6:hover .contentBx h2 {
    color: #000;
}

Output:

merged(8)



Like Article
Suggest improvement
Next
How to make Profile Card Hover Effect using CSS ?
Share your thoughts in the comments

Similar Reads

Responsive Card with hover effect using HTML and CSS
How to make Profile Card Hover Effect using CSS ?
Design a Letter Hover Effect using HTML CSS and JavaScript
Design a Image Hover Effect Color Transition template using HTML and CSS
Design a Rotating card effect using HTML and CSS
Design a Carousel Column Expansion Animation Effect on Hover using CSS
Glassmorphism Card Hover Effect
How to create Skewed Background with hover effect using HTML and CSS?
How to create paper corner fold effect on hover by using HTML and CSS?
How to Create Animated Navigation Bar with Hover Effect using HTML and CSS ?

S
surya9c5sb
Article Tags :
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox