Z-Index Placing Text in Front of Image : I have a section with 3 columns, the middle column has an GIF image within it, but the text at either side is behind it rather than in front.

I've tried a few z-index options with no luck, not sure where I'm going wrong on the correct way I should be using this property.

Heres what I have - I've removed z-index from CSS:

     <div class="row">
                <i class="icon ion-md-exit"></i>
                 <h2>TEXT</h2>
                 <p>TEXT</p>
             </div>
             
         </div>
         
         
         
         <div class="col span-1-of-3">
         <img src="resources/css/img/gif.gif">
         </div>
         
           
           
            <div class="col span-1-of-3">
             <div class="row">
               <i class="icon ion-md-exit"></i>
                <h2>TEXT</h2>
                <p>TEXT</p>
                 
             </div>

CSS

    .section-all-design {
        height: 100vh;
        background-color: #fbfbfb;
        padding: 5%;
    }
    
    .section-all-design img {
        width: 190%;
        margin-left: -50%;
    }
    

Also- Whilst I'm here, I'm looking to vertically align these text boxes along each side of my GIF image, what properties do I need to add to my vertical-align to make this happen? Line-height doesn't help me.

Thanks!
