Ryu BOF3

<Style>

.pfor {display: none;}
#profile {background: transparent; border: 0px;}

#whole {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
 background-image:url(http://i66.tinypic.com/2hevqd0.jpg);
background-repeat: no-repeat;
background-position: bottom right;
background-size: auto 100%;
}

#ryu{
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  position: absolute;
  background-image:url(http://i65.tinypic.com/30tphk2.jpg);
background-repeat: repeat;
  background-size: 80% auto;
opacity: 1;
  transition: all 1s;
-webkit-transition: all 1s;
}

@font-face{ src:url(https://dl.dropboxusercontent.com/u/4556289/yataghan.ttf);
  font-family:'titlefont';
}

@font-face{
  src:url(https://dl.dropboxusercontent.com/u/4556289/magic11.ttf);
  font-family:'bodyfont';
}

#titlediv{position: absolute;
left: 0px;
right: 100px;
top: 0px;
bottom: 100px;
margin: auto;
height: 500px;
width: 200px;
border: 0px solid black;
transition: all 1s;
-webkit-transition: all 1s;
opacity: 0;}

#thetitle{position: absolute;
top: 50px;
left: 0px;
right: 0px;
text-align: center;
font-size: 50pt;
font-family:'titlefont';
color: #6F6A9C;}

#linespread{
  position: absolute;
  top: 132px;
  height: 3px;
  background: #3C3442;
  width: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  border: 1px solid transparent;
  border-radius: 50px 50px 50px 50px;
  transition: all 1s;
-webkit-transition: all 1s;
  opacity: 0;
}

#whole:hover #ryu{
  opacity: 0;
  transition: all 5s;
-webkit-transition: all 5s;
}
#whole:hover #titlediv{
  transition: all 3s .3s;
-webkit-transition: all 3s .3s;
  opacity: 1;
}
#whole:hover #linespread{
  transition: all 1s 2s, opacity 6s 1s;
-webkit-transition: all 1s 2s, opacity 6s 1s;
  width: 120px;
  opacity: 1;
}

#boxspread{position: absolute;
  left: -150px;
width: 500px;
height: 450px;
bottom: -120px;
border: 0px solid black;
overflow: hidden;
border-radius: 20px 20px 20px 20px;
transition: all 1s;
-webkit-transition: all 1s;
opacity: 0;}

#backfiller{
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  opacity: .4;
  background: blue;
  border-radius: 20px 20px 20px 20px;
}

#texttime{position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
overflow: hidden;
border: 2px solid #726D9D;
border-radius: 20px 20px 20px 20px;
box-sizing: border-box;}

#linkbox{
  position: absolute;
  top: 5px;
left: 15px;
height: 20px;
width: 200px;
border: 1px solid black;
font-weight: 600;
word-spacing: 10px;
font-family:'titlefont';
font-size: 10pt;}

#contentbox{position: absolute;
top: 5px;
left: 2px;
right: 2px;
bottom: 5px;
overflow: auto;
border: 0px solid black;
  box-sizing: border-box;
  padding: 5px;
  text-align: left;
  font-family:'bodyfont';
  font-size: 14pt;
  font-weight: 500;
  color: color;
  font-style:italic;
  transition: all 1s;
  -webkit-transition: all 1s;
border-radius: 10px 10px 10px 10px;}

#whole:hover #boxspread{
  transition: all 2s 2.5s;
  -webkit-transition: all 2s 2.5s;
  opacity: 1;
}

</style>

<div id="whole">
  <div id="ryu">
</div>
  <div id="titlediv">
    <div id="thetitle">
      RYU
    </div>
    <div id="linespread">
    </div>
    <div id="boxspread">
      <div id="backfiller">
      </div>
      <div id="texttime">
        <div id="contentbox">
          TYPE ALL CONTENT HERE.
        </div>
      </div>
    </div>
  </div>
</div>