CSS Grid - Images mit Text und Zoom bei hover

  • Zitat

    Was generell noch fehlt:


    - Das ganze Bild soll ein Hyperlink sind

    - Das Bild soll sich ähnlich wie der Text skalieren

    Zitat

    ich habe das jetzt nochmal versucht und es kommt echt nichts gewolltes bei raus. Das ist echt schade, weil ich bei google auch nichts konkretes finde

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

  • 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 :D


    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:

    Code
    1. <div id="dasTeamContainer">
    2. <a href="team.html">
    3. <figure id="grid-item-team">
    4. <img id="dasTeamBild" src="images/team.jpg" alt="alternativer_text">
    5. figcaption id="dasTeam"> Das Team</figcaption>
    6. </figure>
    7. </a>
    8. </div>


    CSS:



    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