flex hover elements not acting as expected

I have set up the beginnings of a Webpage for my start up business however the css for one of my flex objects is not going as expected.

I have a :hover attached to a card to change the opacity of the text inside and the size of the card itself so that it seems as though the card grows with the text. this however comes with the issue that if you hover over the currently hidden part of the flex element, it completes the :hover CSS.

you can view the website here: NetRepair

Any help will be appreciated, the code is in the GitHub repo for the page. I am aware that there are some bad practices however I am just learning. :)

For those who dont wish to go to Github for the CSS:

.container .card {
    position: relative;
    width: 250px;
    height: 215px;
    background-color: #303030;
    display: flex;
    flex-direction: column;
    margin-left: 40px;
    margin-right: 40px;
    font-family: helvetica, sans-serif;
    border-radius: 7px;
    animation: gradient 5s ease infinite;
    transition: 1.1s ease-in-out;
}
.container .card:hover .content-h {
    opacity: 1;
    visibility: visible;
    font-family: helvetica, sans-serif;
    transition: 1.2s ease-in-out;
}
.container .card:hover {
    position: relative;
    height: 525px;
    font-family: helvetica, sans-serif;
    margin-bottom: -310px;
    padding: 15px;
        padding-top: 60px;
}

Once again, any help will be appreciated :)

This is because the content overflows from the card and user can hover on them in order to fix it add overflow: hidden; to your card like this:

.card {
  overflow: hidden;
}

This makes sure that the content that overflows are hidden and user can't hover on them.