Probleme mit der Animation bei hover

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

andrea_ratlos

Neues Mitglied
27 Juli 2020
3
0
1
26
Hallo zusammen,
ich habe folgendes Problem (für manche wahrscheinlich total einfach zu lösen aber ich finde nichts in den Foren).
Bei hover über ein Bild, bei dem der obere Teil verdeckt ist, fährt dieses langsam mit nach unten und gibt den oberen Teil frei. Sobald ich die Maus weg bewege springt es zum Anfang, es soll aber langsam zurück gleiten. Hier mein Entwurf (px werde ich noch in em umwanden... habt Nachsicht mit mir Anfängerin)
<div id="info">
<div class="oben">
<div class="button"><img src="pic/bu1.png" ></div>
</div></div>
-------- In der css Datei----
.oben{
position: relative;
width: 100%;
height: 45px;
top:45px;
overflow:hidden;
}
.button {
position:absolute;
height: 75px;
position:absolute;
bottom:0;
left:2em;
}
.button :hover {
animation-duration:0.25s;
animation-fill-mode: forwards;
animation-name:verlauf;
animation-timing-function: ease-in-out;
}

@keyframes verlauf{
from { transform: translatey(0px) }
to { transform: translatey(45px)}
}
 
Werbung: