Jquery loading MVC Views on hover causes flickering issues

I want each div to expand and change it's contents on hover and go back to the previous state on mouseout. The way I do this is with MVC partial Views:

(Subpages.cshtml)

<div id="subpages" class="mx-auto d-flex justify-content-evenly">
    <div class="subpage" id="subpage1">
        @Html.Partial("Subpage1Narrow")
    </div>
    <div class="subpage" id="subpage2">
        @Html.Partial("Subpage2Narrow")
    </div>
    <div class="subpage" id="subpage3">
        @Html.Partial("Subpage3Narrow")
    </div>
</div>

(Subpage1Narrow.cshtml)

<div class="d-flex align-items-start flex-column" style="width: 456px;">
    <p class="subpage__title mb-4 mx-4"><b>Subpage<br>1</b></p>
    <br>
    <p class="mx-4">...</p>
    <button type="button" class="btn btn-danger mt-auto mb-5 mx-4" id="subpage1__button" style="font-family: var(--alt-font)"><b>Learn more <span class="bi bi-arrow-right"></span></b></button>
</div>

(Subpage1Wide.cshtml)

<div class="d-flex flex-column align-items-center mx-auto" style="width: 1368px; height: 681px;">
    <p class="text-center subpage__title mb-4 mx-4 mt-auto"><b>Subpage 1</b></p>
    <br>
    <b class="text-center mb-5 subpage__text--extended">...</b>
    <div class="row w-50 text-center mb-3">
        <div class="col">
            <img src="~/img/ICON1.svg" width="57" height="49">
        </div>
        <div class="col">
            <img src="~/img/ICON2.svg" width="66" height="59">
        </div>
        <div class="col">
            <img src="~/img/ICON3.svg" width="37" height="56">
        </div>
    </div>
    <div class="row w-50 text-center mb-5">
        <div class="col">
            <b class="d-block subpage__subtitle--extended">1</b>
        </div>
        <div class="col">
            <b class="d-block subpage__subtitle--extended">2</b>
        </div>
        <div class="col">
            <b class="d-block subpage__subtitle--extended">3</b>
        </div>
    </div>
    <button type="button" class="btn btn-danger mt-4 mb-5" id="subpage1__button" style="font-family: var(--alt-font)"><b>Learn more <span class="bi bi-arrow-right"></span></b></button>
</div>

(site.css weird hack but I had issues with other approaches)

#subpages:hover > .subpage:not(:hover) {
    width: 0;
}

(HomeController.cs)

public IActionResult GetView(string viewName)
{
    return PartialView(viewName);
}

(site.js)

function capitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
}

$(document).ready(function () {
    $(".subpage").mouseover(function () {
         $(this).load("/Home/GetView", {viewName: `${capitalize($(this).attr('id'))}Wide`})
    });

    $(".subpage").mouseout(function () {
         $(this).load("/Home/GetView", {viewName: `${capitalize($(this).attr('id'))}Narrow`})
    });
});

This however results in very unreliable behavior. The contents of the divs flicker whenever I move my mouse and sometimes don't change back on mouseout. This is my first time mixing C# with front-end so I'm sure I'm making some kind of mistake here but I just can't find a solution for this. Is there one? Or should I somehow change my approach completely?

Thanks for help.