tamaki my beloeved

by gael

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
::-webkit-scrollbar {
display: none; /* Chrome Safari */
}

@font-face {
font-family: cerl;
src: url(https://dl.dropbox.com/s/ss5bqbogijw4zfj/Lovely%20Script.otf);
}

#hoohoo {
width: 100%;
white-space: nowrap;
overflow-x: auto;
padding: .5em;
box-sizing: border-box;
height: 22em;
overflow-y: hidden;
}
.lala {
width: 10em;
border: 1px solid black;
white-space: normal;
display: inline-block;
height: 90%;
padding: .2em;
vertical-align: middle;
}
.container {
border: 1px solid black;
margin:auto;
position: relative;
width: 50%;
}

.image {
display: block;
width: 100%;
height: auto;
}

.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #ffffff;
overflow: hidden;
width: 100%;
height:0;
transition: .5s ease;
}

.container:hover .overlay {
bottom: 0;
height: 100%;
}

.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}

</style>
</head>

<div class="container">
<img src="https://i.pinimg.com/564x/60/4f/52/604f52679e683f3ffcc29f48fd3ff172.jpg" class="image">
<div class="overlay">
<div id="hoohoo">
<div class="lala">
To make this a scrollbox: add "overflow-y: scroll;" in ".lala". </div>
<div class="lala">
You can add these infinitely, just add another div class="lala" in between greater than/less than signs. </div> <div class="lala"> More stuff here
</div> <div class="lala"> More stuff here </div> <div class="lala"> More stuff here </div>
</div> </div>
</div>
horizontal scrollbox base code creds: resource.ju.mp