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
<div id="dasTeam"> Fertige Projekte</div>
<img id="dasTeamBild" src="images/team.jpg" alt="alternativer_text">
CSS:
Code
#dasTeamBild{
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 11;
grid-row-end: 19;
filter: grayscale(50%);
z-index: 1;
}
#dasTeam:hover + #dasTeamBild{
filter: blur(2px);
overflow: hidden;
transition-duration: 0.2s;
transform: scale(1.1);
z-index: -20;
}
#dasTeam{
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 11;
grid-row-end: 19;
font-family: 'Raleway', sans-serif;
font-size: 5vw;
color: white;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid black;
z-index: 4;
overflow: hidden;
}
Alles anzeigen
Ist alles ein bisschen hardcode, weil ich noch ausprobiere. Weiß jemand, warum das nicht läuft?
Gruß