CAP

by Alexus fox

HTML

<div class="fixedcap">
CAP</div>
<div id="content">
<div class="wrapper">

<div class="mario">
  <div>
    <figure>
      <img src="http://alexusdfox.com/interaction_2/images/mario.jpg" /></figure>
    <span> Someone who loves racing their friends but hates to lose so they throw bananas and shells to win.</span>
  </div>
  <div>
  
  <div class="cowboy">
  <div>
    <figure2>
      <img src="http://alexusdfox.com/interaction_2/images/cowboy.jpg" /></figure2>
    <span> Someone who needs a way to block the sun out of their eyes when there ridding there nobel steed.</span>
  </div>
  <div>
  
    <div class="ash">
  <div>
    <figure3>
      <img src="http://alexusdfox.com/interaction_2/images/ash.jpg" /></figure3>
    <span> Someone who wants be the very best
Like no one ever was.To catch them is my real test.To train them is my cause.</span>
  </div>
  <div>
  
     <div class="pimp">
  <div>
    <figure4>
      <img src="http://alexusdfox.com/interaction_2/images/pimp.jpg" /></figure4>
    <span>Someone who like marketing and sales.</span>
  </div>
  <div>
  
   <div class="dope">
  <div>
    <figure5>
      <img src="http://alexusdfox.com/interaction_2/images/dope.jpg" /></figure5>
    <span>Someone who in fact is not the word "DOPE".</span>
  </div>
  <div>
  
  
   <div class="chef">
  <div>
    <figure6>
      <img src="http://alexusdfox.com/interaction_2/images/chef.jpg" /></figure6>
    <span>Someone who loves to prepare and cook  dishes.they know the difference between medium and medium rare.".</span>
  </div>
  <div>
  
       <div class="grad">
  <div>
    <figure7>
      <img src="http://alexusdfox.com/interaction_2/images/grad.jpg" /></figure7>
    <span>"Someone who is finishing a chapter in their life soon. They won't have this hat very long.'</span>
  </div>
  <div>
  
        <div class="fly">
  <div>
    <figure8>
      <img src="http://alexusdfox.com/interaction_2/images/fly.jpg" /></figure8>
    <span>Someone who is dreaming of flying. They...

CSS

body {
  background-color: black;
}

.fixedcap {
  color: white;
  font-family: "helvetica";
  font-size: 280px;
  position: fixed;
  bottom: 0;
  top: 0px;
  left: 0;
  right: 0;
  height: 280px;
  text-align: center;
  border: 3px solid #73AD21;
}
#content {
position: absolute;
top: 280px;
bottom: 20px;
width: 100%;
background-color:black;
overflow: auto;
}

p {
  color: green;
}
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
body {
  color: #333;
  font-family: 'Open Sans Condensed', sans-serif;
  font-weight: 300;
}

h1,
h1+p {
  margin: 30px 15px 0;
  font-weight: 300;
}

h1+p a {
  color: #333;
}

h1+p a:hover {
  text-decoration: none;
}

h2 {
  margin: 60px 15px 0;
  padding: 0;
  font-weight: 300;
}

h2 span {
  margin-left: 1em;
  color: #aaa;
  font-size: 85%;
}

.mario {
  margin: 0px 0px 0;
  padding: 0;
}

.mario:last-child {
  padding-bottom: 60px;
}

.mario::after {
  content: '';
  clear: both;
  display: block;
}

.mario div {
  position: relative;
  float: left;
  width: 300px;
  height: 180px;
  margin: 0 0 0 15px;
  padding: 0;
}

.column div:first-child {
  margin-left: 0;
}

.mario div span {
  position: absolute;
  top: 90px;
  left: 210px;
  z-index: -1;
  display: block;
  width: 180px;
  margin: 0;
  padding: 0;
  color: #7F47DD;
  text-transform: uppercase;
  font-size: 20px;
  text-decoration: none;
  text-align: left;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  opacity: 0;
}

figure {
  position: absolute;
  bottom: 0px;
  top: 90px;
  width: 200px;
  height: 180px;
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

figure:hover+span {
  bottom: -36px;
  opacity: 1;
}


/*COWBOY*/

.cowboy {
  margin: 0px 0px 0;
  padding: 0;
}

.cowboy:last-child {
  padding-bottom: 60px;
}

.cowboy::after {
  content: '';
  clear: both;
  display: block;
}

.cowboy div {
  position: relative;
  float: left;
  width: 300px;
  height: 180px;
  margin: 0 0 0 15px;
  padding:...