Sjabloon:Artikelenlijst/styles.css: verschil tussen versies
Geen bewerkingssamenvatting |
Geen bewerkingssamenvatting |
||
| Regel 8: | Regel 8: | ||
.artikel-card .artikel-cover { | .artikel-card .artikel-cover { | ||
width: 100%; | width: 100%; | ||
height: | height: 150px; | ||
border-radius: 3px; | border-radius: 3px; | ||
overflow: hidden; | overflow: hidden; | ||
| Regel 16: | Regel 16: | ||
width: 100%; | width: 100%; | ||
transition: transform .2s; | transition: transform .2s; | ||
position: absolute; | |||
left: 50%; | |||
top: 50%; | |||
transform: translateY(-50%) translateX(-50%); | |||
} | } | ||
Versie van 27 jun 2022 15:20
.artikelen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
column-gap: 1em;
row-gap: 1.5em;
}
.artikel-card .artikel-cover {
width: 100%;
height: 150px;
border-radius: 3px;
overflow: hidden;
}
.artikel-card .artikel-cover img {
width: 100%;
transition: transform .2s;
position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
}
.artikel-card:hover .artikel-cover img {
transform: scale(1.1);
}
.artikel-body {
padding: 10px 2px 0 2px;
}
.artikel-body h3 {
margin-top: 0px;
font-size: 1.1em;
}
.artikel-card:hover h3 {
color: #0645ad;
}
.artikel-body h3 a {
color: black;
}
.artikel-body p {
color: #54595d;
margin: 0;
}