Kart 45

.card45 {
width: 190px;
height: 254px;
border-radius: 1em;
padding: 1.9rem;
background: #f5f5f5;
position: relative;
display: flex;
align-items: flex-end;
transition: 0.4s ease-out;
box-shadow: 0px 7px 20px rgba(43, 8, 37, 0.2);
}

.card45:before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: rgba(238, 116, 116, 0.4);
z-index: 2;
transition: 0.5s;
}

.card45-info {
position: relative;
z-index: 3;
color: #f5f5f5;
opacity: 0;
transform: translateY(20%);
transition: 0.5s;
}

/*Text*/
.text-title45 {
font-size: 1.5rem;
font-weight: 500;
}

.text-body45 {
letter-spacing: 1px;
font-size: 0.9rem;
margin: 5px 0 15px 0;
}

/*Button*/
.card45-button {
padding: 0.6rem;
outline: none;
border: none;
border-radius: 4px;
background: #ee9ca7;
color: white;
font-weight: bold;
transition: 0.4s ease;
}

/*Image*/
.card45-img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #e7aeae;
background: linear-gradient(to bottom, #e7aeae, #37d5d6);
}

/*Hover*/
.card45:hover {
transform: translateY(5%);
}

.card45:hover:before {
opacity: 1;
}

.card45:hover .card45-info {
opacity: 1;
transform: translateY(0);
}

.card45-button:hover {
background: rgba(218, 77, 77, 0.4);
color: #f5f5f5;
}