Untitled

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>8-bit</title>
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
    <style>
  /*you can change the bg if you want but try not to change the other stuff it will mess up the theme*/
    body
    {  background: url("https://s-media-cache-ak0.pinimg.com/736x/d8/cf/db/d8cfdbfb66fe19b6a341625ca39e0892.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
      }
/*container that holds the text and image */
.test{
  width:300px;
  background-color:white;
  margin:auto;
  display:block;
  height:300px;
   position: absolute;
  top: 50%;
  margin-top: -150px;
}
 /*fade in animmation */
@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

/*takes away the image on hover*/

/*fades in the text on hover*/
.test:hover .content { display: block;
  -webkit-animation: fadeEffect 1.5s;
    animation: fadeEffect 1.5s;
}
/* makes sure the image is the same size as container */
img.title{
  width:300px;

 }

.test:hover .title {
  display: none;
}
 /* makes text invisible to begin with */
 .test .content { display: none; }
 /*scrollbar inside the text box*/
::-webkit-scrollbar {
  width:5px;
  color:white;}
.credit{
        font-size: 12px;
         position: absolute;
        bottom: 0;
        right: 0;}
</style>
  </head>
  <body>

<!-- I kept this so you could see where i have the margins set, feel free to move them to fit your screen but theyre not super dynamic with other screen sizes !-->
<div class="test" style="margin-left:100px;">
<img class="title " src="https://cdn.instructables.com/FFB/WMFG/FWBNM65X/FFBWMFGFWBNM65X.MEDIUM.jpg">
<p class="content">here's some text about yourself</p>
<p class="content"> here is a list:
<ul class="content">
<li> one</li>
<li> two</li>
<li> three</li> </ul>  </div>
<div class="test" style="margin-left:500px;">
<img class="title" src="https://cdn.instructables.com/FFB/WMFG/FWBNM65X/FFBWMFGFWBNM65X.MEDIUM.jpg">
<p class="content">im gay</p>
</div>
<div class="test" style="margin-left: 900px;">
<img class="title" src="https://cdn.instructables.com/FFB/WMFG/FWBNM65X/FFBWMFGFWBNM65X.MEDIUM.jpg">
<p class="content">i love mario</p>

</div>
<!-- please dont delete, feel free to ask me any questions about coding !-->
<div class="credit">
    <a href="http://twitter.com/tcadsworth"> @peachie</a>
  </body>
</html>