Cards Overlay effect in asp.net web page

Question

Hello,

Please how can create two situations where 3 or 4 cards overlay each other just as shown in the below images ?

In the first image the cards overlay each other horizontally.

While in the second image the cards overlay each other vertically.

Then when cursor hovers on any card, it bring the card in front, with its contents and other cards will be behind.

Please help me out, how can I do this?

I tried this and it did not work

<style>
        .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;
        }
</style>

 <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>