Overlay cards on each other

Donald Symmons 2,861

Hello forum,

Please how can a situation where I have about 4 cards that overlay each other on a webpage, just as shown in the image below?

When the cursor hovers on any card, the card will be brought forward and other cards go behind.

Here is what I tried


        .mycards {
            justify-content: center;
            text-align: center;
            align-items: center;
            height: 250px;
            width: 500px;
            background-color: rgb(36, 168, 36);
            font-size: 20px;
        }
 
        .card1 {
            margin-top: 80px;
            color: white;
            font-size: 40px;
            font-weight: bold;
            background-color: #909090;
            border: 0.5px solid #3b3b3b;
            border-radius: 7px;
        }
        .card2 {
             border-radius: 7px;
        }
 
        .card1:hover {
            z-index: -1;
            opacity: 0.5;
            font-size: 20px;
            text-align: center;
            transform-style: all;
            transition-duration: 1s;
        }
 
        .card2:hover {
            z-index: -1;
            font-size: 40px;
            text-align: center;
            transform-style: all;
            transition-duration: 1s;
        }
 
<div class="row col-sm-11" style="width: 100%; margin: 0 auto; margin-top: 8%; margin-bottom: 4%;">
                    <div class="mycards col-sm-5">
                        <div class="">
                            <div class="card1" style="background-color: #0b2436;">1st Card</div>
                        </div>
                        <div class="">
                            <div class="card2" style="background-color: #145c7c;">2nd Card</div>
                        </div>
                    </div>
                    <div class="col-sm-5" style="margin: 0 auto;"></div>
                </div>

overlay card

Accepted answer

QiYou-MSFT 4,321 Microsoft Vendor

Hi @Donald Symmons

My idea is to combine the box-shadow property and the transform property. Then we set 4 cards and different displacements according to the situation.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
</head>
<style type="text/css">
    
    .card {
        padding: 10px;
        width: 300px;
        height: 180px;
        background-color: #FFF;
        border: none;
        border-radius: 6px;
        -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1);
        transition: all 250ms cubic-bezier(.02, .01, .47, 1);
    }
        .card:hover {
            box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);
            transform: translate(0,-100px);
            transition-delay: 0s !important;
        }
    .box-shadow {
        -webkit-box-shadow: 0 0.25rem 1rem rgba(48, 55, 66, 0.15);
        box-shadow: 0 4px 16px rgba(48, 55, 66, 0.15);
    }
    
    .card-header {
        text-align: center;
    }
    .card-body, .card-footer {
        text-align: left;
    }
</style>
<body style="background: #e3e3e3;">
    <div class="card box-shadow">
        <div class="card-header">
            <p>This is a card</p>
        </div>
        
    </div>
</body>
</html>

Card

Best Regards

Qi You

Donald Symmons 2,861 Reputation points

2023-01-17T09:59:17+00:00

Hi @QiYou-MSFT

Okay. If I add 3 more card to the card div, will I get the desired result?

QiYou-MSFT 4,321 Microsoft Vendor

Hi @Donald Symmons

The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
</head>
<style type="text/css">
    .card3 {
        padding: 10px;
        width: 300px;
        height: 180px;
        background-color: #FFF;
        border: none;
        border-radius: 6px;
        -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1);
        transition: all 250ms cubic-bezier(.02, .01, .47, 1);
    }
        .card3:hover {
            box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);
            transform: translate(0,-600px);
            transition-delay: 0s !important;
        }
    .box3-shadow {
        -webkit-box-shadow: 0 0.25rem 1rem rgba(48, 55, 66, 0.15);
        box-shadow: 0 4px 16px rgba(48, 55, 66, 0.15);
    }
    .card3-header {
        text-align: center;
    }
    .card3-body, .card3-footer {
        text-align: left;
    }
    .card2 {
        padding: 10px;
        width: 300px;
        height: 180px;
        background-color: #FFF;
        border: none;
        border-radius: 6px;
        -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1);
        transition: all 250ms cubic-bezier(.02, .01, .47, 1);
    }
        .card2:hover {
            box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);
            transform: translate(0,-400px);
            transition-delay: 0s !important;
        }
    .box2-shadow {
        -webkit-box-shadow: 0 0.25rem 1rem rgba(48, 55, 66, 0.15);
        box-shadow: 0 4px 16px rgba(48, 55, 66, 0.15);
    }
    .card2-header {
        text-align: center;
    }
    .card2-body, .card2-footer {
        text-align: left;
    }
    .card1 {
        padding: 10px;
        width: 300px;
        height: 180px;
        background-color: #FFF;
        border: none;
        border-radius: 6px;
        -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1);
        transition: all 250ms cubic-bezier(.02, .01, .47, 1);
    }
        .card1:hover {
            box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);
            transform: translate(0,-200px);
            transition-delay: 0s !important;
        }
    .box1-shadow {
        -webkit-box-shadow: 0 0.25rem 1rem rgba(48, 55, 66, 0.15);
        box-shadow: 0 4px 16px rgba(48, 55, 66, 0.15);
    }
    .card1-header {
        text-align: center;
    }
    .card1-body, .card1-footer {
        text-align: left;
    }
    .card {
        padding: 10px;
        width: 300px;
        height: 180px;
        background-color: #FFF;
        border: none;
        border-radius: 6px;
        -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1);
        transition: all 250ms cubic-bezier(.02, .01, .47, 1);
    }
        .card:hover {
            box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);
            transform: translate(0,0px);
            transition-delay: 0s !important;
        }
    .box-shadow {
        -webkit-box-shadow: 0 0.25rem 1rem rgba(48, 55, 66, 0.15);
        box-shadow: 0 4px 16px rgba(48, 55, 66, 0.15);
    }
    
    
    .card-header {
        text-align: center;
    }
    .card-body, .card-footer {
        text-align: left;
    }
</style>
<body style="background: #e3e3e3;">
    <div style="background-color: aquamarine; position: relative; top: 100px; left: 150px;" class="card box-shadow">
        <div class="card-header">
            <p>This is a card</p>
        </div>
    </div>
    <div style="background-color: cadetblue; position: relative; top: 101px; left: 150px;" class="card1 box1-shadow">
        <div class="card1-header">
            <p>This is a card</p>
        </div>
    </div>
    <div style="background-color: purple; position: relative; top: 102px; left: 150px;" class="card2 box2-shadow">
        <div class="card-header">
            <p>This is a card</p>
        </div>
    </div>
    <div style="background-color: red; position: relative; top: 103px; left: 150px;" class="card3 box3-shadow">
        <div class="card-header">
            <p>This is a card</p>
        </div>
    </div>
</body>
</html>

Modify the ascent and descent distance：transform: translate(x,y);

If you need to bring the cards closer together：

<div style="background-color: cadetblue; position: relative; top: 150px; left: 150px;" class="card1 box1-shadow"> change to

<div style="background-color: cadetblue; position: absolute; top: 101px; left: 150px;" class="card1 box1-shadow">

(The first div control cannot be modified). Card2

CARD3

Best Regards

Qi You

1 additional answer

Tasadduq Burney 8,421 MVP

Based on the code you've provided, you are trying to change the z-index and opacity of the cards when they are hovered over. However, this alone will not achieve the desired effect of bringing the hovered card forward and pushing the other cards behind it.

One way to achieve this effect is to use the CSS position property, and set it to relative for all cards and absolute for the hovered card. This way, the hovered card will be positioned on top of the other cards and will appear to be in front of them.

Here is an example of how you can modify your code to achieve the desired effect:

.card {
    position: relative; /* all cards are positioned relatively */
    border-radius: 7px;
}
.card:hover {
    position: absolute; /* hovered card is positioned absolutely */
    z-index: 1; /* brings the hovered card to the top */
    font-size: 40px;
    text-align: center;
    transform-style: all;
    transition-duration: 1s;
}

Donald Symmons 2,861

Hi @Tasadduq Burney ,

How can I create such as in the above image I posted? Because I have tried and it's givin me a different outcome, not like the one in the above picture .

This is what it gave me:

cards

 .card-overlay {
            position: relative;
            border-radius: 5px;
        }
        .card-overlay:hover {
            position: absolute;
            z-index: 1;
            font-size: 28px;
            text-align: center;
            transform-style: all;
            transition-duration: 1s;
        }



<div class="col-sm-8">
                        <div class="card-overlay" style="width: auto; background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%); border: none;">
                            <div class="card-body">
                                <div style="font-weight: 500; font-size: 17px; line-height: 40px; vertical-align: baseline; letter-spacing: -1px; word-spacing: 1px; text-align: start;">
                                    CARD 1
                                </div>
                                <asp:LinkButton ID="LinkButton1" runat="server" Font-Size="14px" ForeColor="#0b2436">
                                                 See guide<i class="fas fa-chevron-circle-right" aria-hidden="true" style="margin: 0 2px; font-size: 14px; color: #0b2436;"></i>
                                </asp:LinkButton>
                            </div>
                        </div>
                        <div class="card-overlay" style="width: auto; background-color: #f2f8fb; border: none;">
                            <div class="card-body">
                                <div style="font-weight: 500; font-size: 17px; line-height: 40px; vertical-align: baseline; letter-spacing: -1px; word-spacing: 1px; text-align: start;">
                                    CARD 2
                                </div>
                                <asp:LinkButton ID="LinkButton2" runat="server" Font-Size="14px" ForeColor="#0b2436">
                                                 See guide<i class="fas fa-chevron-circle-right" aria-hidden="true" style="margin: 0 2px; font-size: 14px; color: #0b2436;"></i>
                                </asp:LinkButton>
                            </div>
                        </div>
                        <div class="card-overlay" style="width: auto; background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); ; border: none;">
                            <div class="card-body">
                                <div style="font-weight: 500; font-size: 17px; line-height: 40px; vertical-align: baseline; letter-spacing: -1px; word-spacing: 1px; text-align: start;">
                                    CARD 3
                                </div>
                                <asp:LinkButton ID="LinkButton3" runat="server" Font-Size="14px" ForeColor="#0b2436">
                                                 See guide<i class="fas fa-chevron-circle-right" aria-hidden="true" style="margin: 0 2px; font-size: 14px; color: #0b2436;"></i>
                                </asp:LinkButton>
                            </div>
                        </div>
                    </div>

Share via

Overlay cards on each other

1 additional answer

Your answer