slide up container

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kosugi&display=swap" rel="stylesheet">

<style>
@font-face {
font-family: hugh is life;
src: url(https://dl.dropbox.com/s/bki6gilknxxouuk/HughIsLifePersonalUseItalic-K7axe.ttf);
}

.container {
position: relative;
width: 300px;
height: 200px;
margin: auto;
z-index: 999;
/* change the background image and the gradient */
background-image: linear-gradient(#ffffff50, #A6B9FF), url('https://64.media.tumblr.com/786d8c9b7b5d747e36efd1f13e6f15e0/6eac967820d3f4ba-f5/s540x810/3b50ada35904f905e087f80bcadf5a7661ac4084.gifv');
background-position: center;
background-size: cover;
color: #fff;
overflow: hidden;
box-shadow: 0px 3px 7px #aaa, inset 13px 0px 6px -10px #fff, inset -13px 0px 6px -10px #fff, inset 0px 13px 6px -9px #ffffff, inset 0px -13px 6px -10px #fff;
border-radius: 10px;
}

h1 {
font-family: hugh is life;
color: #fff;
font-size: 4em;
text-align: left;
animation: glow 1.5s infinite;
}

@keyframes glow { 0% { text-shadow: 0px 0px 15px white; } 50% { text-shadow: 0px 0px 5px white; } 100% { text-shadow: 0px 0px 15px white; }
}

p {
font-family: kosugi;
color: #424242;
font-size: 0.9em;
text-align: right;
}

p2 {
font-family: kosugi;
color: #fff;
font-size: 0.6em;
text-align: right;
font-style: italic;
font-weight: 900;
}

mark {
color: #ffffff;
font-size: 1.2em;
background: transparent;
-webkit-filter: drop-shadow(0px 0px 1px #fff);
}

a {
color: #ffffff;
-webkit-filter: drop-shadow(0px 0px 1px #fff);
text-decoration: none;
}

.top-left {
position: absolute;
top: 0px;
left: 8px;
}

.top-right {
position: absolute;
top: 4px;
right: 8px;
}

.content {
position: absolute;
top: 60px;
/* change the opacity of the slide up */
opacity: .7;
width: 100%;
height: 90%;
/* change the background color of the slide up */
background-color: #A6B9FF;
padding-right: 10px;
padding-left: 10px;
/* make the shadow the same color as the background */
box-shadow: 0 0 30px 35px #A6B9FF;
-webkit-transform: translateY(80%);
transform: translateY(80%);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity 0.2s 0.3s, -webkit-transform 0.4s;
transition: opacity 0.2s 0.3s, -webkit-transform 0.4s;
transition: transform 0.4s, opacity 0.2s 0.3s;
transition: transform 0.4s, opacity 0.2s 0.3s, -webkit-transform 0.4s;
}

.slide-up:hover .content {
/* change the opacity of the slide up */
opacity: .8;
-webkit-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: opacity 0.2s, -webkit-transform 0.4s;
transition: opacity 0.2s, -webkit-transform 0.4s;
transition: transform 0.4s, opacity 0.2s;
transition: transform 0.4s, opacity 0.2s, -webkit-transform 0.4s;
}
</style>

<div class='container slide-up'>
<!--- DON'T REMOVE --->
<div class="top-right">
<p2>cr. aicoholdrink</p2></div>

<div class="top-left"><h1>Name</h1></div>

<div class='content'>
<p><mark>Info</mark> info info info info info info info info info info info info info info info </p>
<br>
<p><mark>Info</mark> info info info info info info info info info info info info info info info </p>
<br>
<p><mark>Info</mark> info info info info info info info info info info info info info info info </p>
</div>
</div>