Hallo,
ich habe einen html Code für eine slide-up Animation gefunden.
Nun funktioniert dieser leider nicht bei Tabletts oder Handys was muss ich bei meinem Code ändern damit es funktioniert ?
Ich bin noch ziemlicher Anfänger und ich freue mich über jede Antwort.
<img class="vorschau" src="image/html-css-slide-up1.png" alt="bild">
Code
<html>
<div class="boxen">
hallo
<div class="hid-boxen">
<h1>Lektion1 Vokabel1</h1>
<p>This is a quick demo of slide-up effect using CSS animation when hover the box. No JS required!</p>
</div>
</div>
<style>
h1 {
margin: 0
}
.boxen {
height: 210px;
width: 310px;
overflow: hidden;
border: 1px solid black;
background: #F2F2F2;
}
.hid-boxen {
top: 100%;
position: relative;
transition: all .6s ease-out;
background: #D6DBE9;
height: 100%;
margin-top:5%;
border:1px solid black ;
}
.boxen:hover > .hid-boxen{
top: 0;
}
.boxen:active > .hid-boxen{
top:0;
}
</style>
</html>