Image Slider Creation With ZOOOMING Effect.

Hey guy's we bring another awesome web program that will show you HOW to create Image Slider with ZOOMING effect. In this program we have use transform Scale property of CSS so that is why we were able to get such amazing output without using any jQuery plugins or any code of JavaScript. So we hope you will like such amazing and awesome web program .

PROGRAM SOURCE CODE :)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title>Image Slider with Zooming Effect</title>


<!---------------------------- CSS Part ---------------------------------->

<style type="text/css">
    
    *{
        margin:0;
        padding: 0;
        box-sizing: border-box;
    }

    .main-div{
        width: 100vw;
        height: 100vh;
        background-color: #000001;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .center-div{
        width: 80%;
        height: 80%;
        position: relative;
        overflow: hidden;
    }

    .center-div img{
        width: 100%;
        height:100%;
    }

    .d{
        position: absolute;
        width: 100%;
        height: 100%;
        transition: transform .2s ease-in-out;
    }

    label{
        width: 3rem;
        height: 3rem;
        background-color: #000;
        color: #fff;
        border-radius: 50%;
        text-align: center;
        font-size: 2.5rem;
        font-weight: 900;
        cursor: pointer;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    #l1{
        left: 3%;
    }

    #l2{
        right: 3%;
    }

    label:hover{
        color: red;
        background-color: yellow;
    }

    input{
        display: none;
    }

    #i1 img,#i2 img,#i3 img{
        z-index: -1;
    }

    #a:checked~#i1,#b:checked~#i2,#c:checked~#i3{
        z-index: 100;
        animation: z .7s linear;
    }
    @keyframes z{
        0%{
            transform:scale(2);
            opacity: 0;
        }
        50%{
            transform:scale(2);
            opacity: 1;
        }
        100%{
            transform: scale(1);
            opacity: 1;
        }
    }




</style>


</head>
<body>
    <div class="main-div">

        <div class="center-div">

            <input type="radio" name="r" id="a">

            <input type="radio" name="r" id="b">

            <input type="radio" name="r" id="c">


            <div id="i1" class="d">

                <label for="c" id="l1">&lt;</label>

                <label for="b" id="l2">&gt;</label>

                <img src="c-sharp.png">

            </div>


            <div id="i2" class="d">

                <label for="a" id="l1">&lt;</label>

                <label for="c" id="l2">&gt;</label>

                <img src="cpp.jpg">

            </div>


            <div id="i3" class="d">

                <label for="b" id="l1">&lt;</label>

                <label for="a" id="l2">&gt;</label>

                <img src="c.png">

            </div>

        </div>

    </div>


</body>
</html>