I have a hidden class fadeThis, which does not appear when I hover over the button. Perhaps it is clashing with another class/div?

What I'm essentially trying to do is create a red fade in over the grey box, when the cursor hovers over the button, and then when the cursor leaves the box(not the button), I want it to return back to it's original state.

I've also added the CSS to help demonstrate

HTML

    <div class="imageOne">

        <div class="onClickThis"> <!-- hidden by default-->
            <h2 class="fadeThis">Whatever the text needs to be</h2> <!-- hidden by default-->
        </div>
        <div class="centerButton">
            <button class="btn">View More</button>
        </div>
    </div>

CSS

.imageOne{
    height: 300px;
    width: 400px;
    background-color: grey;
}

.centerButton{
    display: flex;
    justify-content:center;
    padding-top:150px;
}

.btn{
    height: 30px;
    width:170px;

}

.onClickThis{
    height: 300px;
    width: 400px;
    background-color: tomato;

}

JavaScript

$(document).ready(function () {
    $(".onClickThis").hide();
    $(".fadeThis").hide();
    $(".btn").hover(function () {
        $(".imageOne").fadeIn("slow", function () {
            $(this).addClass("fadeThis onClickThis");
            $(".btn").remove();
        });
        $(".onClickThis").mouseleave(function () {
            $(this).removeClass("fadeThis onClickThis");

        });
    });

});