.tile-container { position: relative; display: inline-block; margin: 1px; overflow: hidden; border-radius: 4px; } .tile-container:hover { background: var(--background-color-quiet--hover); } .tile-img { text-align: center; transition: var(--transition-hover); transition-property: transform; } .tile-container:hover .tile-img { transform: scale(1.1); } .tile-caption { position: absolute; z-index: 4; bottom: 1px; left: 50%; transform: translateX(-50%); width: 95%; text-align: center; text-transform: uppercase; font-size: 12px; font-weight: bold; color: white; background: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.6) 100%); border-radius: 5px; }