CSS Grid - Images mit Text und Zoom bei hover

  • Hi,


    ich komme einfach nicht auf einen grünen Zweig.


    Was ich möchte:

    In einem CSS-Grid mehrere Bilder anordnen und wenn man mit dem Zeiger rüberfährt, soll das Bild so einen Zoom-Effekt zeigen. Dabei soll es aber stets nicht über die Maße des vorgegeben Grids hinausragen, was momentan bei mir der fall ist. Das Bild wird vergrößert, aber man sieht, wie es aus dem für ihn vorgesehenen Bereich herausspringt und der overflow: hidden nicht funktioniert.

    Außerdem soll vor dem Bild ein Text angezeigt werden und wenn ich auf das Bild klicke, soll eine andere Seite geöffnet werden.


    HTML:

    Code
    1. <div id="dasTeam"> Fertige Projekte</div>
    2. <img id="dasTeamBild" src="images/team.jpg" alt="alternativer_text">



    CSS:




    Ist alles ein bisschen hardcode, weil ich noch ausprobiere. Weiß jemand, warum das nicht läuft? :)


    Gruß

  • Ich danke auch. Mir ist noch nicht ganz klar, wie Du dir das vorstellst: Text und Bild sollen in einer Zelle des Grid stehen? Ich würde eher empfehlen, sie in verschiedenen Zellen anzuordnen, dann würde das ganze übersichtlicher. Oder alternativ die Zelle als figure-Tag und darin den Text als figcaption und das Bild in einem extra Container, damit das overflow: hidden; wirksam werden kann. Etwa so:

    Code
    1. <div id="grid-container">
    2. <figure id="grid-item-team">
    3. <figcaption id="dasTeam"> Fertige Projekte</figcaption>
    4. <div>
    5. <img id="dasTeamBild" src="images/catimage13.png" alt="alternativer_text">
    6. </div>
    7. </figure>
    8. </div>
  • Ach so, an den Link hatte ich gar nicht mehr gedacht: Statt des div ein a-href-Tag verwenden:

    Code
    1. <div id="grid-container">
    2. <figure id="grid-item-team">
    3. <figcaption id="dasTeam"> Fertige Projekte</figcaption>
    4. <a href="das-linkziel.html">
    5. <img id="dasTeamBild" src="images/catimage13.png" alt="alternativer_text">
    6. </a>
    7. </figure>
    8. </div>

    Und das CSS natürlich auch anpassen:

  • Zitat

    das Bild füllt mehr als den vorgegebenen Bereich aus.

    So passt sich das Bild an den verfügbaren Platz an:

  • Danke für deine Bemühung, aber das funktioniert immer noch nicht. Also es ändert sich gar nichts zum code davor. Die Funktionen stimmen alle, aber der Text wird oberhalb des Bildes angezeigt und Das Bild hält sich nicht an die row und column Vorgabe für das Grid.

  • Um es auf deinen Code abzustimmen wäre das Grid-Layout wie folgt:


    Code
    1. #grid-container {
    2. display: grid;
    3. grid-template-columns: repeat(9, 1fr);
    4. grid-template-rows: repeat(21, 4vw);
    5. grid-gap: 0px;
    6. }


    Aber die exakten Anzahlen an rows und columns ist ja wumpe. Wenn ich sage, dass das Bild wie in diesem Fall von


    Code
    1. #grid-item-team {
    2. grid-column-start: 1;
    3. grid-column-end: 4;
    4. grid-row-start: 11;
    5. grid-row-end: 19;
    6. }


    laufen soll, dann soll es auch nur dadrin angezeigt werden :)

  • Ich habe jetzt dieses CSS hinzu gefügt:

    um den Text auf das Bild zu legen. Sieht jetzt bei mir so aus:

    grid-centered-figcaption.png

    Das blaue ist das figure-Element. Wie Du siehst, ist die Box mit dem Text darin zentriert. Nur das Bild füllt das figure nicht aus.

  • Das ist jetzt ein generelles Problem, dass das Seitenverhältnis des Bildes nicht mit dem der Zelle übereinstimmt. Da hast Du zwei Möglichkeiten:

    1. Akzeptieren, dass seitlich oder oben und unten leerer Raum entsteht

    oder

    2. Akzeptieren, dass vom Bild etwas abgeschnitten wird, damit es den Container vollständig ausfüllt.

    Einstellen kannst Du das mit object-fit:

    https://wiki.selfhtml.org/wiki…haften/Anzeige/object-fit

  • Um nochmal alles aufzulisten:


    - Bild im Grid anzeigen lassen, im Modus cover meinetwegen, sodass stets die gesamte Zelle im CSS-Grid ausgefüllt ist

    - Text auf dem Bild anzeigen lassen

    - das gesamte Bild soll einen Link enthalten, sprich auf eine andere Seite führen

    - wenn man über das Bild hovert, dann soll sich das Bild größer skalieren, irgendwelche Bilder angewendet werden, aber es soll niemals die vorgegeben CSS-Gridgrenzen überschreiten


    Bekomme das echt nicht hin.

  • Ich glaube du solltest deine Seite mal Online stellen oder bei Codepen ein Beispiel erstellen wo man dein problem sehen kann.

    Der beste Lehrer kann dir nicht helfen wenn du auf deiner Seite zb andere Scripte oder Co hast die dazwischen stören könnten, oder bei deiner umsetzung etwas falsch gelaufen ist.

    Das kann man so ja nicht sehen.


    Nicht böse gemeint , aber eine Live Ansicht macht es viel einfacher.:)