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
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
ZitatWas generell noch fehlt:
- Das ganze Bild soll ein Hyperlink sind
- Das Bild soll sich ähnlich wie der Text skalieren
Zitatich 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
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.
Dann wird es wohl nicht anders gehen, als dass einer der neu dazukommenden eine Lösung postet, die ready-for-copy&paste ist. Forenregeln und Eigeninitiative - egal.
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;
}
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
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.