Wie in CSS über Gridlayout ein horizontales ausgeblendetes Menü?

[Kwerdi11]

Hallo,
wie könnte ich hier über meinem Gridlayout noch ein horizontales ausgeblendetes Menü erstellen? Also, dies soll nur erscheinen, wenn ich nach oben scrolle oder in dem Bereich hover?
Wäre super, wenn jemand eine Idee hätte. Danke vorab und LG

Mein Code in CSS ist bisher folgender:

body {
     margin: 0;
     box-sizing: border-box;
     padding: 0;
     width: 100%;
     height: 100%;
}
 .container {
	 display: grid;
	 width: 100vw;
     height: 100vh;
	 margin: 0 auto;
	 grid-template-columns: 25% 25% 25% 25%;
     grid-template-rows: 15% 60% 25% ;
}
 .container main {
     grid-column: 1 / 5;
     grid-row: 1 / 4;
}
 .container main .card1 {
     background: lightgreen;
	 grid-column: 1 / 2;
	 grid-row: 1 / 4;
}
.container main .card2 {
     background: lightblue;
     grid-column: 2 / 3;
     grid-row: 1 / 4;
}
.container main .card3 {
     background: coral;
     grid-column: 3 / 4;
     grid-row: 1 / 4;
}
.container main .card4 {
     background: red;
     grid-column: 4 / 5;
     grid-row: 1 / 4;
}

 

[Paloby]

Hallo Kwerdi,

vielleicht einfach per position:fixed ein Menü drüber legen, ausblenden und mit nem scrolllistener versehen, dass wenn hochgescrollt wird der Bereich eingeblendet wird?

Dann vielleicht noch mit ner Animation wo die Höhe des Menüs erhöht wird, damit es etwas flüssiger aussieht.

Mit dem Hover ist so ne Sache.. warum sollte etwas passieren wenn es vorher keine CTA gibt, die ich hover? Vielleicht ein Icon auf welches man hovert und damit das Menü aktiviert o.ä.?

Hoffe ich konnte dir helfen..
LG
Paloby