Template:Tile/styles.css: Difference between revisions

Latest revision as of 07:51, 1 August 2024

.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;
}