CSS und Hover

[Matthias Scharwies]

Servus!

Hallo Rider,

danke für den Hinweis, jetzt funktioniert es. Was mich allerdings wundert ist, dass der Effekt im neuen Firefox nciht korrekt dargestellt wird. Dazu muss ich vermutlich den einen oder anderen Befehlssatz anpassen.

Ich habe jetzt nicht viel Zeit nachzuschauen - mir ist nur folgendes aufgefallen:

IM HTML-Markup verwendest Du jetzt figure figcaption; im CSS-Regelsatz jedoch noch

.figure-img:hover .span {
    opacity: 0;
}

Ich teste so etwas immer erst mit einem Element (oder Block) bis es funktioniert und füge es dann in meine Testseite ein.

Ich hätte gerne oben einen Header, der nicht weggescrollt werden kann (Logo, Menü). Die eleganteste Variante wäre m.E. dies in dem Grid zu integrieren. Geht dies? oder muss ich dies mit einem Banner machen der als externes Element oben hängt...?

Wenn es immer oben sein soll, muss es ja gar nicht im Grid sein, sondern davor:

<header>
  <a class="backlink" href="/">zurück zur Startseite</a>
  <nav>
  …
  </nav>
</header>

<main>
  ...

Im CSS sähe das (verkürzt) dann so aus:

header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	background: white;
}

@media (min-width: 40em) {
  main {
    display: grid;
    grid-template-columns: repeat (6, 1fr);
  }

}

position:sticky geht bei vielen Browsern, aber nicht bei allen.

Ich habe gegenüber Deinem CSS die media-query auf relative Größen (die sich auf die Textgröße und nicht auf feste Pixel beziehen) angepasst und die vielen fr in eine repeat-Funktion gepackt. So sieht man gleich, dass es 6 Spalten sind.

Herzliche Grüße

Matthias Scharwies