User:Alistair3149/sandbox/card2/template/styles.css

.template-card { position: relative; background: var( --color-surface-1 ); border-radius: var( --border-radius--medium ); box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.04 ), 0 3px 6px rgba( 0, 0, 0, 0.0575 ); overflow: hidden; }

.template-card__image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #242a31; border-radius: var( --border-radius--medium ); }

.template-card__image a { display: block; height: 100%; }

.template-card__image img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 250ms ease; }

.template-card:hover .template-card__image img { transform: scale( 1.1 ); }

.template-card__image:after { position: absolute; pointer-events: none; right: 0; bottom: 0; left: 0; display: block; height: 60%; background: linear-gradient( to top, #000, transparent ); border-radius: 0 0 8px 8px; content: ''; }

.template-card__content { position: absolute; pointer-events: none; right: 15px; bottom: 15px; left: 15px; }

.template-card__title { color: #fff; font-weight: 600; }

.template-card__text { color: #bababa; font-size: 0.8125rem; }