CSS-Hover-Übergang Hält den Inhalt an derselben Position ⇐ CSS

[Guest]

Ich füge einige Hover-Animationen zu einer Karte hinzu, die ich als Teil einer Website erstelle (alles über CSS), und während es wie beabsichtigt funktioniert, versuche ich, an den „obersten“ Werten, also am Text selbst, herumzubasteln bewegt sich während des Übergangs nicht. Unten ist ein Ausschnitt des Codes, den ich habe. Es ist nicht das Ganze (das Ganze wäre 26 davon), aber hier ist ein Beispiel, das zeigt, was ich versuche.
CSS & HTML, Nein JavaScript (versucht die Sprache zu vermeiden):

Code: Select all

.Container{ /* Container for Map Elements */
position: relative;
width: 100%;
height: 100%;
font-size: 0.45vw;
font-family: "p22-underground", sans-serif;
font-weight: 600;
font-style: normal;
}

.MBRAnim:hover{ /* Hover animation for Bus Routes in Map Key */
justify-content: center;
cursor: pointer;
color: white; transition: 1s;
background-color: white; padding-top: 0.1815vh; padding-bottom: 0.1815vh; top: calc(top - 0.093vw); transition: 1s;

}

a:link{
color: black;
}

a:visited{
color: black;
}

.Map81{
background-color: #997f53;
position: absolute;
top: 88.3%;
left: 4.4%;
transition-property: top;
}

Code: Select all

Buses Map






[img]Test_assets\Map_Rescaled.png[/img]
 

[url=Bus_81.html]81 - Hounslow Bus Station - Slough Bus Station[/url]

Der Übergang funktioniert wie erwartet, worüber ich mir keine Sorgen mache, aber ich Ich möchte vorzugsweise, dass sich der oberste Wert ändert, damit der Text an der gleichen Y-Position bleibt. Ich habe das mit „top: calc(top - 0.093vw);“ versucht. im CSS unter der Klasse MBRAnim:hover mit einer hinzugefügten Übergangseigenschaft in der Klasse „Map81“, obwohl es bei mir nicht funktioniert. Ich bin mir ziemlich sicher, dass ich die richtige Idee habe, aber wahrscheinlich stimmt einfach irgendwo etwas nicht, daher wäre es schön, schnell ein zweites Paar Augen zu bekommen, um zu sehen, ob ich etwas übersehen habe.