On hover fade image and show text

[GemmieDodger]

Hi,

Please can I add a CSS trick to fade out a div with text, that brings text to the foreground. Please see markup below and codepen of effect:

https://codepen.io/gemmiedodger/pen/vYLRzRK

<div class="gallery_product">
    <div class="img-gallery">
        <p class="img-text">WHY IS IT SO RAINY...</p>
    </div>
    <div class="middle-gallery">

        <p class="strokeme">HERE COMES THE SUN</p>    

    </div>
</div>

<style>
    .gallery_product
    {
        margin-bottom: 30px;
        position: relative;
        width:250px;
        height: 250px;
    }

    .img-gallery {
        display: block;
        max-width: 100%;
        background-color: darkslateblue;
        opacity: 1;
        transition: .5s ease;
        backface-visibility: hidden;
        height: 250px;      
        text-align: center; 

    }
    
    
    
    .img-text {
       padding-top: 50%;
       width: 250px;
       color: darkgrey;
       font-weight: bolder;
       
    }
    
    .middle-gallery {
        transition: .5s ease;
        opacity: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 250px;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        text-align: center;
        color: yellow;
        font-weight: bolder;
        letter-spacing: 3px;
        font-size: 24px;
        padding: 16px 32px;
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;

    }

    .gallery_product:hover .img-gallery {
        opacity: 0.2;
    }

    .gallery_product:hover .middle-gallery {
        opacity: 1;
    }


</style>```