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

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)

Article Tags :

CSS

Dev Scripter

Web Technologies

Web Templates

Dev Scripter 2024