Wordpress mix-blend-mode affecting child div

Question

I'm trying to port a Photoshop mockup into my Wordpress theme. I want the portfolio image to get a "mixed-blend-mode: multiply layer with a green color" on hover.

The H3 text in the child div "vert-center" gets affected by the mix-blend-mode and I can't figure out a way to disable it for this div.

Image example: 1. no hover PS mockup 2. on hover PS mockup 3. how it looks in my browser right now (with the affected text circled).

A similar question was asked here however I haven't been able to solve it with the answer.

I'm working in Wordpress and adjusting the Custom CSS code in my theme so have limited options to play with.

Custom CSS

.work-info:hover { 
background-color: #00e1af;
mix-blend-mode: multiply;
opacity: 1 !important; 
}

The HTML for displaying the portfolio item

<div class="col elastic-portfolio-item  element commercial feed videos" data-project-cat="commercial feed videos " data-default-color="true" data-title-color="" data-subtitle-color="" style="width: 425px; position: absolute; left: 850px; top: 0px;">

                    <div class="inner-wrap" data-animation="none">


                        <div class="work-item style-3-alt" data-custom-content="off" data-text-align="middle">

                            <img class="size- skip-lazy" src="https://www.example.com/wp-content/uploads/2018/01/jj-600x403.png" alt="" height="403" width="600" srcset="https://www.example.com/wp-content/uploads/2018/01/jj-600x403.png 600w, https://www.example.com/wp-content/uploads/2018/01/jj-400x269.png 400w" sizes="(min-width: 1000px) 25vw, (min-width: 690px) 50vw, 100vw" style="height: 285px; background-blend-mode:screen !important;">
                            <div class="work-info-bg"></div>
                            <div class="work-info">

                                <a href="https://vimeo.com/224912269?iframe=true" class="default-link gallery magnific" target="_blank" style="display: inline;"></a>                                   

                                <div class="vert-center">

                                        <h3>Example Portfolio Titel </h3> 


                                </div><!--/vert-center-->

                            </div>
                        </div><!--work-item-->



                </div><!--/inner-wrap-->
                </div>

Does someone now if I can fix this with CSS?

Thank you in advance!