如何为Section/Div、图片及Hover状态下的overlay添加圆角？

我有一张图片（），鼠标hover时会放大，但我想给图片以及hover时覆盖图片的overlay添加圆角，该怎么操作？

我的HTML代码：

<section class="effects">
<div class="container">

   <div class="image-01-outer">

    <div class="image-01">
      <img src="PHILIPPA'S NEW VIDEO.png" alt="">

          <div class="overlay1">
              <div class="text-content">
                  <h3 class="h3-img">Header</h3>
                  <p>Body of text. Body.</p>
              </div>
          </div>
  </div>

   </div>

</div>

</section>

我的CSS代码：

.effects .image-01 
{
border: 1px solid blue;  
border-radius: 4rem;  
position: relative; 
}

.effects .image-01 img
{
    max-width: 120rem;
}

.effects .image-01 .overlay1
{
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: 0.5s ease;
    background-color: rgba(228, 20, 255, 0.327);
}

.effects .image-01:hover .overlay1
{
    opacity: 1;
}

.effects .image-01:hover 
{
    transition: transform .4s;
    transform: scale(1.1);
    transform-origin: 100% 50%;
}

要实现图片和overlay都有圆角，同时保留hover放大效果，需要修改以下几点：

1. 给外层容器.image-01-outer添加裁剪和圆角
   hover时.image-01会缩放，外层必须裁剪溢出内容，否则放大的元素会突破圆角边界。

2. 让图片填满容器并添加圆角
   图片需要设置宽高占满容器，配合object-fit: cover维持比例，同时添加圆角保证和容器一致。

3. 给覆盖层.overlay1添加圆角
   绝对定位的overlay需要同步设置圆角，确保视觉上和容器、图片统一。

修改后的CSS代码：

/* 新增：外层容器裁剪溢出，设置圆角 */
.effects .image-01-outer {
  border-radius: 4rem;
  overflow: hidden;
  display: inline-block; /* 让容器贴合内容宽度 */
}

.effects .image-01 
{
border: 1px solid blue;  
position: relative; 
/* 移除此处border-radius，改由外层容器控制 */
}

.effects .image-01 img
{
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例并填满容器 */
    border-radius: 4rem; /* 图片添加圆角 */
}

.effects .image-01 .overlay1
{
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: 0.5s ease;
    background-color: rgba(228, 20, 255, 0.327);
    border-radius: 4rem; /* 覆盖层添加圆角 */
}

.effects .image-01:hover .overlay1
{
    opacity: 1;
}

.effects .image-01:hover 
{
    transition: transform .4s;
    transform: scale(1.1);
    transform-origin: 100% 50%;
}

修改后，图片、覆盖层在hover前后都会保持圆角，放大效果也能正常展示，不会出现内容溢出圆角的情况。

内容的提问来源于stack exchange，提问作者user25068399