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

[Kwerdi11]

Hallo,

ich hab schon eine Weile mit CSS, Html und sass usw gearbeitet. Ich bin jedoch lange raus und tue mich mit den Ansätzen der Umsetzung gerade schwer.
Wie könnte ich z.b. oberhalb eines Gridlayoutes noch ein horizontales ausgeblendetes Menü erstellen? Also, dies soll nur erscheinen, wenn ich nach oben scrolle? Solle ich hier ein Div über dem Grid-Container ausblenden und wenn ewollt visible stellen?
Dazu suche ich nach einem Hover-Effekt der eine Card bei Zustand Hover etwas breiter werden lässt und die anderen dann umso kleiner.



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;
}