Salesforce lwc: Box list design / show words over image (samples)

Show elements over image in box 1. 

Sample image

Sample code

<template>

    <div class="slds-grid slds-wrap">

        <div class="slds-col slds-size--1-of-1 slds-small-size--1-of-2 slds-medium-size--1-of-4">

            <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around--x-small">

                <div style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeSIfqeYOqJobB_-tgvaxBIk2mCaH3YUaM8qwp9RAVHETAS-WjBr5kXta-PIOQ_CJYBjX7tvzJFCcrIT40My4kt_VZ1pGiUthP4CO8BGCgQZqZZFMegGdgLTM6zzrxmwnHkSYDp2GDYTKN6uU6PAsSZm4C-k_YY6Atzf0HQarihdmeVRfxGdaaY-Oq/s203/radio-group%20base.png); height: 100px; background-repeat: no-repeat">

                    <div class="slds-text-align_center" style="height: 90%;">

                        <lightning-button label="preview"></lightning-button>

                    </div>

                    <div class="slds-m-bottom_none">

                        <lightning-badge label="10:00" class="slds-badge_inverse slds-float_left"></lightning-badge>

                        <lightning-badge label="100kb" class="slds-badge_inverse slds-float_right slds-m-top_none"></lightning-badge>

                    </div>

                </div>

            </div>

        </div>

        <div class="slds-col slds-size--1-of-1 slds-small-size--1-of-2 slds-medium-size--1-of-4">

            <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around--x-small">Box 2</div>

        </div>

        <div class="slds-col slds-size--1-of-1 slds-small-size--1-of-2 slds-medium-size--1-of-4">

            <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around--x-small">Box 3</div>

        </div>

        <div class="slds-col slds-size--1-of-1 slds-small-size--1-of-2 slds-medium-size--1-of-4">

            <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around--x-small">Box 4</div>

        </div>

        <div class="slds-col slds-size--1-of-1 slds-small-size--1-of-2 slds-medium-size--1-of-4">

            <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around--x-small">Box 5</div>

        </div>

    </div>

</template>