.card { display: grid; margin-bottom: 2rem; border-radius: 1rem; overflow: hidden; position: relative; background: linear-gradient(to top, rgba(233, 228, 241, 0.5), transparent 100%); border-style: solid; border-width: 1px; } .card a { display: block; position: relative; text-decoration: none; } .cardtext { display: grid; align-items: end; opacity: 0; transition: bottom .3s, opacity .3s; padding: 1.5rem; position: absolute; bottom: -20px; background: linear-gradient(360deg, #000000cf 60%, transparent 100%); } .card:hover .cardtext { opacity: 1; bottom: -20px; } .card a span { font-size: 1em; display: block; line-height: 1.1; font-weight: 700; }