Spider Man

CSS:

/* CODED BY: JESS.
        DO NOT STEAL THIS CODE AND MODIFY IT AS YOUR OWN. */
body { cursor: default; }
#profile-container {
  font-family: Courier New;
  font-size: 10px;
  color: #000;
  background: none;
  display: block;
  height: 500px;
  width: 475px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  overflow: hidden;
}
#container2 {
  margin-top: 55px;
  width: 400px;
  height: 280px;
  padding: 25px;
  background: url('http://i.imgur.com/LnjbmPx.png');
  opacity: 0.99;
}
#container2 .img {
  opacity: 0.85;
  position: absolute;
  -moz-transition-delay: .0s;
  -webkit-transition-delay: .0s;
  -o-transition-delay: .0s;
  -ms-transition-delay: .0s;
  transition-delay: .0s;
  -moz-transition-duration: .1s;
  -webkit-transition-duration: .1s;
  -o-transition-duration: .1s;
  -ms-transition-duration: .1s;
  transition-duration: .4s;
  width: 230px;
  height: 290px;
  top: 75px;
  left: 200px;
  background-image: url('http://i.imgur.com/E5f4fUb.png');
  background-position: top center;
}
#container2:hover .img {
  opacity: 0.85;
  top: 75px;
  width: 190px;
  left: 25px;
  -moz-transition-delay: .0s;
  -webkit-transition-delay: .0s;
  -o-transition-delay: .0s;
  -ms-transition-delay: .0s;
  transition-delay: .0s;
}
.infotext {
  position: relative;
  width: 190px;
  height: 270px;
  overflow-y: auto;
  overflow-x: hidden;
  font-family: Courier New;
  font-size: 10px;
  text-align: justify;
  line-height: 12px;
  color: #f3f3f3;
  clear: all;
  left: 200px;
  opacity: 0;
  margin-top: -5px;
  padding: 10px;
  background-color: rgba(15,82,109,0.80);
}
.infotext::-webkit-scrollbar {
  width: 3px;
  background-color: transparent;
}
.infotext::-webkit-scrollbar-thumb {
  width: 2px;
  background-color: rgba(253,211,125,0.85);
}
#container2 .infotext {
  -moz-transition-delay: .0s;
  -webkit-transition-delay: .0s;
  -o-transition-delay: .0s;
  -ms-transition-delay: .0s;
  transition-delay: .0s;
  -moz-transition-duration: .4s;
  -webkit-transition-duration: .4s;
  -o-transition-duration: .4s;
  -ms-transition-duration: .4s;
  transition-duration: .4s;
}
#container2:hover .infotext {
  opacity: 1;
  -moz-transition-delay: .0s;
  -webkit-transition-delay: .0s;
  -o-transition-delay: .0s;
  -ms-transition-delay: .0s;
  transition-delay: .0s;
}
#container2 .firstcolumn {
  position: absolute;
  width: 170px;
  height: 290px;
  top: 75px;
  left: 25px;
  opacity: 1;
  font-size: 8px;
  text-transform: uppercase;
  background: url('http://i.imgur.com/Fj201r0.png');
  -moz-transition: .4s;
  -webkit-transition: .4s;
  -o-transition: .4s;
  -ms-transition: .4s;
  transition-in: .4s;
  opacity: 0.75;
}
#container2:hover .firstcolumn {
  opacity: 0;
}
.namestats {
  text-align: right;
  font-weight: 500;
  font-family: Arial, Helvetica;
  color: #fff;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 10px;
  margin-top: 70px;
  margin-left: 25px;
  width: 110px;
  height: 110px;
  border: 1px solid #fff;
}
.smallstats {
  font-family: Courier New;
  font-weight: normal;
  line-height: 11px;
  font-size: 10px;
  letter-spacing: 0px;
}
a:link, a:visited, a:active, a:hover {
  color: inherit;
  text-decoration: none;
}
#credit {
  margin-top: -15px;
  opacity: 0.05;
  display: block;
  height: 15px;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
}
#credit:hover {
  opacity: 0.65;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
}.tooltip { cursor: pointer; }



HTML:

<div id="container2">
<div class="firstcolumn">
<div class="namestats">
<div class="smallstats">The Amazing Spider-Man;</div>
<br />
<div class="smallstats">&mdash;&mdash;Peter Parkeri&mdash;&mdash;<br /><br /> Age: 25.<br /> Gender: Male.<br /> Status: Single.</div>
</div>
</div>
<div class="img">&nbsp;</div>
<div class="infotext">
<p>My name is Peter Parker , and I've been Spider-Man since I was 15 years old.</p>
<p>&nbsp;</p>
<p>So what is my story? Who am I? You sure you want to know? The story of my life is not for the faint of heart. If somebody said it was a happy little tale, if somebody told you I was just your average ordinary guy, not a care in the world, somebody lied. I can't tell you everything. I mean, there's so much to tell. So many people I've let down. So many promises broken, because I couldn't keep my hero life, and my civilian life seprate...&nbsp;<br />So you still wanna hear my story?</p>
<p>&nbsp;</p>
<p>It goes a little something like this: Boy meets spider. Spider bites boy. Boy gets amazing spider-like powers. And what did, lil' Peter Parker, your's truly do with this gift? Did I right wrongs? Fight crime? Protect the innocent? ...Naaah. I used my powers to make a quick buck on prime time tv. I used it to become Spider-Man TV's sensation over night. I was looking out for number one. These were my powers, and they made me better than anyone right? Oh boy, did I realize just how wrong I was. My uncle Ben and man who was like a father to me was shot a killed by a thief right in front of Aunt May. A thief I let get away at the T.V studio.</p>
<p>&nbsp;</p>
<p>The same one I could have stopped a hundered different ways, like a spider powered punch to the jaw. But that was too little too late. I'll never make the mistake again. I've been given a great power, but with that there must also come great responsiblity. That means when push comes to shove? My life as Peter Parker always has to take a back seat. And with all the bad guys I've pilled up over the years? It's nearly a full time job.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</div>
<div id="credit"><a href="http://profiles.rphaven.com/Geek" target="_blank">ooc profile</a>. layout credit to <a href="http://profiles.rphaven.com/Jess" target="_blank">jess</a>.</div>