Javascript 圆形包装中的平方Div元素在悬停时溢出，而在未悬停时保持隐藏

我有一个圆形的容器/包装器，其中使用2x2网格布局，溢出设置为隐藏

父div的每个子对象都有一个不同的方形背景图像，其位置设置为绝对位置，并定位到圆形容器的中心

鼠标悬停时，我希望背景图像溢出容器，以显示整个图像，同时保持其设置的锚定点

我以前在网站上看到过这种做法，但我在网上很难找到答案

我已经做了一个说明，说明我正在尝试做什么。

提前感谢您，感谢阅读本文的任何人花费大量时间来帮助找到解决方案。我可能应该注意到，我是一名一年级学生，还在学习

.container  {   width: 650px;
                height: 800px;
                position: relative;
                border-color: #FAE5D3;
                border-radius: 50%;
                box-shadow: -10px 15px 20px;
                margin: auto;
                border-width: 8px;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                grid-template-rows: repeat(2, 1fr);
                grid-column-gap: 0px;
                grid-row-gap: 0px;
                border-style: outset;
                overflow: hidden;   }
.upperleft      {   grid-area: 1 / 1 / 2 / 2;
                    width: 325px;
                    height: 400px;
                    border-radius: 325px 0px 0px 0px;
                    position: relative;
                    bottom:0;
                    right:0;
                    white-space: nowrap;
                    overflow: hidden;
                    background-image: url(Bluehead.jpg);
                    background-repeat:no-repeat;
                    background-position:right bottom;   }
.upperleft:hover    {   overflow: visible;
                        z-index: 1;     } 
.upperleftin:hover  {   position: absolute; }
.upperright     {   grid-area: 1 / 2 / 2 / 3;
                    width: 325px;
                    height: 400px;
                    border-radius: 5px 325px 0px 0px;
                    position: absolute;
                    bottom:0;
                    left:0;
                    background-image: url(Red.jpg); 
                    background-repeat:no-repeat;
                    background-position:left bottom;    }
.bottomleft     {   grid-area: 2 / 1 / 3 / 2;
                    width: 100%;
                    height: 100%;
                    border-radius: 0px 0px 0px 325px;
                    position: absolute;
                    top:0;
                    right:0;
                    background-image: url(Green.jpg);
                    background-repeat:no-repeat;
                    background-position:right bottom;   }
.bottomright    {   grid-area: 2 / 2 / 3 / 3;
                    width: 100%;
                    height: 100%;
                    border-radius: 0px 0px 325px 0px;
                    position: absolute;
                    top:0;
                    left:0;
                    background-image: url(Yellow.jpg);
                    background-repeat:no-repeat;
                    background-position:right bottom;   }

    <div class="container">
        <div class="upperleft">
        <p>Testing upperleft div Blue.jpg background</p>
            <div class="upperleftin" style="background-image: url(Bluehead.jpg); background-repeat:no-repeat; background-position:right bottom;">
            <p>Testing the upperleft hover</p>
            </div>
        </div>
        <div class="upperright">
        <p>Testing upperright div Red.jpg background</p>
        </div>
        <div class="bottomleft">
        <p>Testing bottomleft div Green.jpg background</p>
        </div>
        <div class="bottomright">
        <p>Testing bottomright div Yellow.jpg background</p>
        </div>
    </div>  

.container{宽度：650px；
高度：800px；
位置：相对位置；
边框颜色：#FAE5D3；
边界半径：50%；
盒影：-10px 15px 20px；
保证金：自动；
边框宽度：8px；
显示：网格；
网格模板列：重复（2，1fr）；
网格模板行：重复（2，1fr）；
栅柱间隙：0px；
网格行间距：0px；
边界样式：开始；
溢出：隐藏；}
.左上{网格区域：1/1/2/2；
宽度：325px；
高度：400px；
边界半径：325px 0px 0px 0px；
位置：相对位置；
底部：0；
右：0；
空白：nowrap；
溢出：隐藏；
背景图片：url（Bluehead.jpg）；
背景重复：无重复；
背景位置：右下；}
.upperleft:悬停{溢出：可见；
z-索引：1；}
.upperleftin:悬停{位置：绝对；}
.右上方{网格区域：1/2/2/3；
宽度：325px；
高度：400px；
边界半径：5px 325px 0px 0px；
位置：绝对位置；
底部：0；
左：0；
背景图片：url（Red.jpg）；
背景重复：无重复；
背景位置：左下；}
.左下{网格区域：2/1/3/2；
宽度：100%；
身高：100%；
边界半径：0px 0px 0px 325px；
位置：绝对位置；
排名：0；
右：0；
背景图片：url（Green.jpg）；
背景重复：无重复；
背景位置：右下；}
.右下{网格区域：2/2/3/3；
宽度：100%；
身高：100%；
边界半径：0px 0px 325px 0px；
位置：绝对位置；
排名：0；
左：0；
背景图片：url（Yellow.jpg）；
背景重复：无重复；
背景位置：右下；}
测试左上div Blue.jpg背景

测试左上悬停

测试右上div Red.jpg背景

测试左下div Green.jpg背景

测试右下div Yellow.jpg背景