(add tile container) |
No edit summary |
||
Line 5: | Line 5: | ||
overflow: hidden; | overflow: hidden; | ||
border-radius: 4px; | 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-img:hover { | |||
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-color: rgba(0, 0, 0, 0.6); | |||
border-radius: 5px; | |||
} | } |
Revision as of 07:35, 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-img:hover { 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-color: rgba(0, 0, 0, 0.6); border-radius: 5px; }