CSS Grid - Images mit Text und Zoom bei hover

https://codepen.io/Kickflip/pen/mdeorPo

Kann Bilder nicht einbinden, weil ich kein "Pro" bin bei codepen.

Was generell noch fehlt:

- Das ganze Bild soll ein Hyperlink sind

- Das Bild soll sich ähnlich wie der Text skalieren

Zitat von Sempervivum

Wenn Du nichts von dem umsetzt, was ich dir bisher geschrieben habe, kann es auch nicht funktionieren.

Doch, das habe ich, aber das sieht dann am Ende noch wilder aus

Border um den Text in der Mitte des Bildes oder das Bild ragt aus der bestimmten Grid-Area heraus u.s.w.

Dachte das neu dazukommende das Problem so besser einordnen können.

So war das doch gar nicht gemeint. Ich habe ALLE deine Hinweise eingearbeitet und waren auch sehr hilfreich, aber haben nicht direkt zum Ziel geführt. Sitze bestimmt schon 15 Stunden an diesem Problem und habe so ziemlich alle Foreneinträge im Internet gelesen und komme einfach nicht auf einen grünen Zweig, weil immer irgendwas nicht passt oder nicht umsetzbar ist.

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

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