CSS - keeping card slide effect within rounded borders-CodePudding

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 >
  <div >
            <img  src="https://retailobjects.scoutshop.org/media/catalog/product/cache/15846fcd7c7438adaa15ad763c45b358/1/0/10504.jpg" alt="american heritage badge emblem">
            <h4>American Heritage</h4>
            <div >
                <div >
                    <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!

CodePudding user response：

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;
}

CodePudding user response：

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 */
}