(make text readable) |
m (zoom in image on container hover) |
||
| Line 18: | Line 18: | ||
} | } | ||
.tile- | .tile-container:hover .tile-img { | ||
transform: scale(1.1); | transform: scale(1.1); | ||
} | } | ||
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;
}