070 | Bleeding Mascara

<div id="masked"><div id="maskito" style="background: url(https://via.placeholder.com/300x400)"></div><div id="maskid"></div>
<div id="data">
<h1>Bleeding Mascara</h1><p></p>
<span>A wraith with an angel's body.
A demon with a smile of gold.</span>
</div>
<div id="txt"><div class="texto">Hola, acá puedes poner tu texto jijiji.</div></div>
</div><div class="crdts"><a href="https://gitanodoescodes.tumblr.com/">— gitano;</a></div>

<style>#masked {width: 300px; height: 400px; outline: 1px solid #222; overflow: hidden; position: relative; margin: 0 auto;}#masked br {display: none;}#maskito {position: absolute; top: -1px; bottom: -1px; right: -1px; left: -1px; -webkit-transition: -webkit-filter .5s linear; background-color: #256254!important; background-blend-mode: multiply!important;}#maskid {position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px; background: #0B0D02; opacity: .6; background-color: #111111!important; background-blend-mode: hue!important; transition: all .5s ease; clip-path: polygon(100% 0, 0% 100%, 100% 100%);}#masked #data {position: absolute; top: 40px; left: 40px; right: 40px; bottom: 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; transform: rotatex(0deg); transition: all .5s ease; text-align: center;} #masked:hover #data {transform: rotatex(90deg)}#masked #data h1 {margin: 0 auto; font: 25px 'Abril Fatface', cursive; color: #efefef; font-style: italic}#masked #data p {height: 1px; background: #fff; width: 220px; margin: 3px; margin-bottom: 6px; margin-top: -5px;}#masked #data span {font: 8px 'Source Code Pro', monospace; text-transform: uppercase; letter-spacing: 1px;} #masked #txt {position: absolute; top: 40px; left: 40px; right: 40px; bottom: 40px; padding-right: 10px; text-align: justify; color: transparent; font: 10px 'Source Code Pro', monospace; overflow-y: auto; transform: rotatex(90deg); transition: all .6s ease;}#masked #txt br {display: block; margin: 5px;}#masked:hover #txt {transform: rotatex(0deg); color: #f1f1f1}.crdts {text-decoration:none; font-family: verdana; font-size: 9px; text-align: center;}#masked ::-webkit-scrollbar {background-color: #256254;border-left: 1px solid #111;border-right: 1px solid #111; width: 3px;}#masked ::-webkit-scrollbar-thumb {background-color: #256254;}</style><link href="https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap" rel="stylesheet">