Cecil

@import url('https://fonts.googleapis.com/css?family=Spectral+SC');
@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:500');
body{
background-color:#fff;
overflow:hidden;
}


::-webkit-scrollbar
{
	width: 0px;
	background-color: transparent;
}



#image{
background-image:url(https://i.imgur.com/cWQnxSW.png);
background-size:100%;
width:400px;
height:600px;
position:absolute;
top:50%;
left:50%;
marginl-left:-100px;
margin-top:-300px;

}

#box1{
width:400px;
height:150px;
background-color:transparent;
position:absolute;
top:50%;
left:50%;
margin-left:-400px;
margin-top:-150px;
transform:skew(10deg);
overflow:hidden;
transition:1s;
transition-delay:99999999s;
z-index:99;
}

body:hover #box1{
background-color:#f5dba2;
box-shadow:0px 0px 10px #222;
transition-delay:.5s;
}

#box2{
width:400px;
height:150px;
background-color:transparent;
position:absolute;
top:50%;
left:50%;
margin-left:-400px;
margin-top:0px;
transform:skew(-10deg);
overflow:hidden;
transition:1s;
transition-delay:99999999s;
z-index:98;
}

body:hover #box2{
background-color:#2c192d;
box-shadow:0px 0px 10px #222;
transition-delay:.5s;
}
h1{
font-family: 'Spectral SC', serif;
font-size:20pt;
color:#2c192d;
text-shadow:0px 0px 2px  #222;
transform:skew(-10deg);
position:absolute;
bottom:0px;
left:0px;
margin-bottom:-16px;
margin-left:50px;
transition:1s;
transition-delay:9999999s;
}

body:hover h1{
margin-left:48px;
transition-delay:0s;
}

h2{
font-family: 'Spectral SC', serif;
font-size:20pt;
color:#f5dba2;
text-shadow:0px 0px 2px  #222;
transform:skew(-10deg);
position:absolute;
top:0px;
left:0px;
margin-top:-15px;
margin-left:50px;
transform:skew(10deg);
transition:1s;
transition-delay:9999999s;
}

body:hover h2{
margin-left:52px;
transition-delay:0s;
}

#info1{
width:140px;
height:110px;
border:solid 1px #000;
position:absolute;
background-color:#f5dba2;
transform:skew(-10deg);
top:0px;
left:0px;
margin-left:40px;
margin-top:10px;
opacity:0;
transition:1s;
transition-delay:99999s;
font-family: 'Cormorant Garamond', serif;
font-size:8pt;
color:#000;
padding:5px;
text-align:left;
overflow:auto;
font-weight:700;
}

body:hover #info1{
transition-delay:1s;
opacity:1;
}

#info2{
width:140px;
height:110px;
border:solid 1px #000;
position:absolute;
background-color:#f5dba2;
transform:skew(-10deg);
top:0px;
right:0px;
margin-right:40px;
margin-top:10px;
opacity:0;
transition:1s;
transition-delay:99999s;
font-family: 'Cormorant Garamond', serif;
font-size:8pt;
color:#000;
padding:5px;
text-align:left;
overflow:auto;
font-weight:700;
}

body:hover #info2{
transition-delay:1.2s;
opacity:1;
}

#info3{
width:300px;
height:55px;
background-color:#2c192d;
border:solid 1px #fff;
position:absolute;
top:0px;
left:0px;
margin-top:15px;
margin-left:45px;
transform:skew(10deg);
opacity:0;
transition:1s;
transition-delay:99999s;
}

body:hover #info3{
transition-delay:1.4s;
opacity:1;
}


#info4{
width:300px;
height:55px;
background-color:#2c192d;
border:solid 1px #fff;
position:absolute;
top:0px;
left:0px;
margin-top:75px;
margin-left:45px;
transform:skew(10deg);
opacity:0;
transition:1s;
transition-delay:99999s;
}

body:hover #info4{
transition-delay:1.6s;
opacity:1;
}

h3{
font-family: 'Spectral SC', serif;
font-size:12pt;
color:#000;
margin-top:0px;
margin-bottom:5px;
text-align:center;
background: url('https://78.media.tumblr.com/a3af01ae0d005b2c881ba0a2f94f2634/tumblr_p2f2wsjS7g1wao8n3o1_540.gif') ;
background-size:100%;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
border-bottom:solid 1px #000;
}

<div id="image"></div>
<div id="box1">
<h1><b>FROM DARK TO LIGHT</b></h1>
<div id="info1">
<h3>A Soul Redeemed</h3>
<span style="float: left; ">Name</span> <span style="float: right;">Cecil Harvey</span><br>
<span style="float: left; ">Age</span> <span style="float: right;">Mid 20s</span><br>
<span style="float: left; ">Gender</span> <span style="float: right;">Male</span><br>
<span style="float: left; ">Orientation</span> <span style="float: right;">Undisclosed</span><br>
<span style="float: left; ">Paramour</span> <span style="float: right;">Lost?</span><br>
<span style="float: left; ">Job</span> <span style="float: right;"><del>Dark Knight</del>/Paladin</span><br>
<span style="float: left; ">Race</span> <span style="float: right;">Hybrid Lunarian/Human</span><br>
<span style="float: left; ">Height</span> <span style="float: right;">5' 10"</span><br>
<span style="float: left; ">Weight</span> <span style="float: right;">128 lbs</span><br>
<span style="float: left; ">Laterality</span> <span style="float: right;">Right-Handed</span><br>
</div>

<div id="info2">
<h3>A Warrior <br>Reborn</h3>
meme
</div>
</div>
<div id="box2">
<h2><b>FROM DARK TO LIGHT</b></h2>
<div id="info3">

</div>
<div id="info4">

</div>
</div>