CSS - keeping card slide effect within rounded borders - html

Question

I am making a personal site about Boy Scout merit badges. I have a page with a background image where I put up a CSS grid containing cards, each of which is about a different badge. The card shows the badge emblem and has the title of the badge. When you hover over the card there is a sliding up of white text with a blue background that explains the badge. When you stop hovering, it slides back down.
The effect works for the most part, but there's one small problem. The cards have rounded borders, and when the blue slides down, at the very end of the slide down, the blue extends beyond the edges of the card. It is very distracting. It starts the slide up the same way, but for some reason it's more distracting on the way down than on the way up. Here's what it looks like at that end.
Here is my HTML:
<main class="main--grid-container">
<div class="mb-blocks center rounded-border wrapper">
<img class="mb-emblem" src="https://retailobjects.scoutshop.org/media/catalog/product/cache/15846fcd7c7438adaa15ad763c45b358/1/0/10504.jpg" alt="american heritage badge emblem">
<h4>American Heritage</h4>
<div class="overlay">
<div class="content">
<p>
Scouts learn about American history while working on the American Heritage
merit badge. Topics covered range from the Declaration of Interdependence,
to the history of the US flag, to historic places, to their own family
history. They also learn about careers related to the study of American
heritage.
</p>
</div>
</div>
</div>
</main>
Here is the CSS:
body {
background-color: lightgreen;
}
.mb-emblem {
height: 150px;
}
.main--grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 25px;
padding-left: 25px;
padding-right: 25px;
}
.center {
text-align: center;
}
.rounded-border {
border-radius: 25px;
}
.mb-blocks {
padding: 25px;
background-color: white;
z-index: 2;
}
h4 {
font-size: 24px;
margin: 0;
}
.wrapper {
position: relative;
}
.content {
color: #fff;
font-size: 1em;
padding: 1em;
}
.content span {
font-size: .75em;
display: block;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #003366;
border-radius: 25px;
width: 100%;
height: 0;
transition: .5s ease;
overflow: hidden;
margin: 0;
}
.wrapper:hover .overlay {
height: 100%;
}
I changed the background-image to a background-color and put it in a CodePen to make it easier to see. Here is the CodePen.
Thanks for the help!

Answer 1

All you need to do is add overflow: hidden to the mb-blocks class.
Like this:
.mb-blocks {
padding: 25px;
background-color: white;
z-index: 2;
overflow: hidden;
}

Answer 2

replace this style code to fix the problem.
.mb-blocks {
padding: 25px;
background-color: white;
z-index: 2;
overflow: hidden; /* This is the important part */
}