Как закруглить края целого раздела/дива ⇐ CSS

[Anonymous]

У меня есть такое изображение
(https://i.sstatic.net/oz4mb8A4.png)
и оно увеличивается при наведении курсора.
Однако я пытаюсь закруглить края изображения и наложение, закрывающее изображение при наведении курсора. Как мне это сделать?
Это мой код в html









Header
Body of text. Body.










и в 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%;
}


Подробнее здесь: https://stackoverflow.com/questions/784 ... ection-div