071 | Who do you think you are?

<div id="myst">
<div id="img" style="background: url(https://via.placeholder.com/460x400)"> </div>
<div id="toti"><h1>who do you</h1></div>
<div id="totu"><h1>Think you are</h1></div>
<div id="tota">
<div class="texto">Soy un espacio de texto para que me llenes. Lo que sí, debes escribir un buen poco, o si no esto se verá súper raro y te dará mucho miedo. Créeme, soy texto.
</div></div>
<div id="tote">M</div>
</div>


<style>#myst {width: 500px; height: 500px; background: #fefefe; border: 1px solid #f3f3f3; position: relative; margin: 0 auto; color: #222}#myst br {display: none}#myst .texto br {display: block; margin: 5px;}#myst #img {position: absolute; top: 20px; left: 20px; right: 20px; height: 400px;}#myst #toti {background: #E4D554; border: 1px solid #E9CF44; border-bottom: none; height: 70px; position: absolute; top: 349px; left: 10px; width: 400px; z-index: 2; transition: all .5s ease;}#myst #totu {background: #E4D554; border: 1px solid #E9CF44; border-top: none; height: 70px; position: absolute; bottom: 10px; left: 10px; width: 400px; z-index: 2; } #myst #tote {position: absolute; bottom: 1px; right: 15px; font: 70px 'Montserrat', sans-serif; font-weight: 800; color: #E9CF44}#myst #toti h1 {margin: 0px; color: #fff; font: 30px 'Montserrat', sans-serif; text-transform: uppercase; text-align: center; position: absolute; bottom: 0px; left: 0px; right: 0px; font-weight: 300;}#myst #totu h1 {margin: 0px; color: #fff; font: 30px 'Montserrat', sans-serif; text-align: center; text-transform: uppercase; font-weight: 800; position: absolute; top: 15px; left: 0px; right: 0px;}#myst #tota {width: 400px; background: #fff; border: 1px solid #f3f3f3; height: 0px; position: absolute; bottom: 80px; left: 10px; transition: all .5s ease; overflow: hidden;}#myst #tota .texto {line-height: 130%; position: relative; top: 20px; left: 20px; text-align:justify; font-family:montserrat; font-size:11px; height: 300px; width:360px; padding-bottom: 5px; overflow:auto; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2;}#myst:hover #toti {top: 10px;}#myst:hover #tota {height: 337px}.texto::-webkit-scrollbar {background-color: #fff; width: 3px; height: 6px}.texto::-webkit-scrollbar-thumb {background: #E9CF44; -webit-transition: all .3s ease-out; transition: all .3s ease-out;}</style><link href="https://fonts.googleapis.com/css?family=Montserrat:100,300,400,500,600,800,900&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Rouge+Script&display=swap" rel="stylesheet">