Ich habe die Lösung für das, was ich haben möchte. Ist ein bisschen gefrickelt, aber es funktioniert:
HTML:
<div id="dasTeamContainer">
<a href="team.html">
<figure id="grid-item-team">
<img id="dasTeamBild" src="images/team.jpg" alt="alternativer_text">
figcaption id="dasTeam"> Das Team</figcaption>
</figure>
</a>
</div>
CSS:
#dasTeamContainer{
position: relative;
display: cover;
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 11;
grid-row-end: 19;
overflow: hidden;
border: 1px solid black;
}
#dasTeamBild {
position: absolute;
justify-content: center;
transition: all 0.2s ease-in-out;
}
#dasTeam{
position: absolute;
bottom: 0; left: 0;
width: 100%;
color: white;
z-index: 1;
font-family: 'Raleway', sans-serif;
font-size: 3vw;
text-align: center;
box-sizing: border-box;
height: 57%;
transition: all 0.2s ease-in-out;
}
#grid-item-team:hover img{
filter: blur(3px);
transform: scale(1.1);
transition: all 0.2s ease-in-out;
}
#grid-item-team:hover figcaption{
font-size: 4vw;
transition: all 0.5s ease-in-out;
}
Alles anzeigen
Das einzige, was noch ein bisschen stört sind die height: 57% für die figcaption, damit sie mittig auf dem Bild angezeigt wird. Das ist ein bisschen sehr hardcoded.
Credits gehen raus an: Sempervivum
