Text over image without using background-image

Sample Code

<div>
    <div>
        <style>
            .OrderSamplecontainer {
                position: relative;
                width: 100%;
                height: auto;
                font-family: 'Poppins';

            }

            .OrderSamplecontainer {
                position: relative;
                width: 100%;
            }

            .OrderSamplecontainer img {
                width: 100%;
                height: auto;
                /* mask-image: linear-gradient(to bottom, rgba(41, 48, 5, 0.65) 0%, rgb(41, 48, 5, 0.65) 100%);
        -webkit-mask-image: linear-gradient(to bottom, rgba(41, 48, 5, 0.65) 0%, rgb(41, 48, 5, 0.65) 100%);*/
            }

            .OrderSamplecontainer .ordersampleContent {
                position: absolute;
                top: 48.5%;
                left: 42.5%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);

                color: white;
                font-size: 16px;

                border: none;

                border-radius: 5px;
                text-align: center;
            }

            .ordersamplspandiv {
                padding-bottom: 5.5%;
                letter-spacing: 1.5px;
            }

            .orderFreeSAmpleshead {
                font-size: 45px;
                color: white;
                font-weight: 600;
                font-family: 'Poppins';
            }


            .orderFreeSAmples {
                text-align: left;
            }

            .ordersamplBtn {
                background-color: white;
                height: 69px;
                color: black;
                border-radius: 38px;
                border: none;
                font-weight: 600;
                padding: 10px 45px;
                font-size: x-large;
                font-family: 'Poppins';
                cursor: pointer;
            }

            .ordersamplspan {
                height: 5px;
                width: 100%;
            }

            @media (max-width: 768px) {
                .deskimgOrderSample {
                    display: none;

                }

                .mobimgOrderSample {
                    display: block;

                }

                .OrderSamplecontainer .ordersampleContent {
                    left: 50%;
                    font-size: 13px;
                    width: 100%;
                    padding: 5px 25px;
                    font-family: 'Poppins';
                }

                .orderFreeSAmpleshead {
                    font-size: 25px;
                    font-family: 'Poppins';
                    font-weight: 600;
                }

                .orderFreeSAmples {
                    text-align: center;
                }

                .ordersamplBtn {
                    height: 43px;
                    padding: 6px 25px;
                    font-size: larger;
                    font-family: 'Poppins';
                }

                .orderFreeSAmples span {
                    font-size: 12px;
                    font-family: 'Poppins';
                    font-weight: 400;
                }
            }

            @media (min-width: 768px) {
                .mobimgOrderSample {
                    display: none;

                }


                .deskimgOrderSample {
                    display: block;

                }
            }

            @media (min-width: 768px) and (max-width:1199px) {

                .OrderSamplecontainer .ordersampleContent {

                    font-size: 12px;

                }

                .orderFreeSAmpleshead {
                    font-size: 25px;
                }

                .ordersamplBtn {
                    height: 45px;
                    padding: 10px 20px;
                    font-size: large;
                }

                .ordersamplspandiv {
                    padding-bottom: 2.5%;
                }
            }

            @media(min-width: 300px) and (max-width:350px) {

                .ordersamplspandiv {
                    padding-bottom: 0%;
                    letter-spacing: 0px;
                }

                .OrderSamplecontainer .ordersampleContent {
                    left: 51%;
                    font-size: 10px;
                    width: 100%;
                    padding: 8px 4px;
                    font-family: 'Poppins';
                }
            }

            @media(max-width:450px) {
                .ordersamplspandiv {
                    padding-bottom: 5.5%;
                    letter-spacing: 0.78px;
                }

                .orderFreeSAmples span {
                    font-size: 12px;
                    font-family: 'Poppins';
                    font-weight: 300;
                }
            }
        </style>
        <div class="OrderSamplecontainer">
            <img class="deskimgOrderSample" src="/images/Home Pages Images/DeskOrderBgImg.png" alt="Snow"
                style="width:100%">
            <img class="mobimgOrderSample" src="/images/Home Pages Images/MobOrderBgImg.png" alt="Snow"
                style="width:100%">
            <div class="ordersampleContent">
                <div class="orderFreeSAmples">
                    <h3 class="orderFreeSAmpleshead">Order Free Samples</h3>
                    <div class="ordersamplspan"></div>
                    <div class="ordersamplspandiv"><span>Get started with free test samples</span></div>
                    <div class="ordersamplspan"></div><a href="/sampleproduct" target="_blank"><button
                            class="ordersamplBtn">Order Now</button></a>
                </div>
            </div>
        </div>
    </div>
</div>