title: Div to Float over div with hover effect
body: <p>I am trying to get a 100% div which is fixed (so that it stays at the top of the page when you scroll) to scroll over multiple small div's with a hover affect. I cannot seem to figure out how to get the navigation to hover over the small divs, it always goes behind it. I believe the problem is the css position tags, but i am at a loss... Please help!</p>
  
  <p>Here is the code for the small div with the hover affect.. i took out the top navigation div because it was not working for me...</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;title&gt;Untitled Document&lt;/title&gt;
      &lt;link rel="stylesheet" href="styles.css"  /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="main"&gt;
          &lt;div class="view view-fifth"&gt;
              &lt;img src="1.png" /&gt;
              &lt;div class="mask"&gt;
                  &lt;h2&gt;Android 4.0&lt;/h2&gt;
                  &lt;a href="#" class="info"&gt;$9.99&lt;/a&gt;
                  &lt;p&gt;
                      Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now!
                  &lt;/p&gt;        
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="main"&gt;
          &lt;div class="view view-fifth"&gt;
              &lt;img src="1.png" /&gt;
              &lt;div class="mask"&gt;
                  &lt;h2&gt;Android 4.0&lt;/h2&gt;
                  &lt;a href="#" class="info"&gt;$9.99&lt;/a&gt;
                  &lt;p&gt;
                      Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now!
                  &lt;/p&gt;        
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="main"&gt;
          &lt;div class="view view-fifth"&gt;
              &lt;img src="1.png" /&gt;
              &lt;div class="mask"&gt;
                  &lt;h2&gt;Android 4.0&lt;/h2&gt;
                  &lt;a href="#" class="info"&gt;$9.99&lt;/a&gt;
                  &lt;p&gt;
                      Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now!
                  &lt;/p&gt;        
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="main"&gt;
          &lt;div class="view view-fifth"&gt;
              &lt;img src="1.png" /&gt;
              &lt;div class="mask"&gt;
                  &lt;h2&gt;Android 4.0&lt;/h2&gt;
                  &lt;a href="#" class="info"&gt;$9.99&lt;/a&gt;
                  &lt;p&gt;
                      Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now!
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
     &lt;/div&gt;
      &lt;div class="main"&gt;
          &lt;div class="view view-fifth"&gt;
              &lt;img src="1.png" /&gt;
              &lt;div class="mask"&gt;
                  &lt;h2&gt;Android 4.0&lt;/h2&gt;
                  &lt;a href="#" class="info"&gt;$9.99&lt;/a&gt;
                  &lt;p&gt;
                      Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now!
                  &lt;/p&gt;        
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="main"&gt;
          &lt;div class="view view-fifth"&gt;
              &lt;img src="1.png" /&gt;
              &lt;div class="mask"&gt;
                  &lt;h2&gt;Android 4.0&lt;/h2&gt;
                  &lt;a href="#" class="info"&gt;$9.99&lt;/a&gt;
                  &lt;p&gt;
                      Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now!
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="main"&gt;
          &lt;div class="view view-fifth"&gt;
              &lt;img src="1.png" /&gt;
              &lt;div class="mask"&gt;
                  &lt;h2&gt;Android 4.0&lt;/h2&gt;
                  &lt;a href="#" class="info"&gt;$9.99&lt;/a&gt;
                  &lt;p&gt;
                      Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now!
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="main"&gt;
          &lt;div class="view view-fifth"&gt;
              &lt;img src="1.png" /&gt;
              &lt;div class="mask"&gt;
                  &lt;h2&gt;Android 4.0&lt;/h2&gt;
                  &lt;a href="#" class="info"&gt;$9.99&lt;/a&gt;
                  &lt;p&gt;
                      Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now!
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="main"&gt;
          &lt;div class="view view-fifth"&gt;
              &lt;img src="1.png" /&gt;
              &lt;div class="mask"&gt;
                  &lt;h2&gt;Android 4.0&lt;/h2&gt;
                  &lt;a href="#" class="info"&gt;$9.99&lt;/a&gt;
                  &lt;p&gt;
                      Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now!
                  &lt;/p&gt;        
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="main"&gt;
          &lt;div class="view view-fifth"&gt;
              &lt;img src="1.png" /&gt;
              &lt;div class="mask"&gt;
                  &lt;h2&gt;Android 4.0&lt;/h2&gt;
                  &lt;a href="#" class="info"&gt;$9.99&lt;/a&gt;
                  &lt;p&gt;
                      Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now!
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="main"&gt;
          &lt;div class="view view-fifth"&gt;
              &lt;img src="1.png" /&gt;
              &lt;div class="mask"&gt;
                  &lt;h2&gt;Android 4.0&lt;/h2&gt;
                  &lt;a href="#" class="info"&gt;$9.99&lt;/a&gt;
                  &lt;p&gt;
                      Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now!
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="main"&gt;
          &lt;div class="view view-fifth"&gt;
              &lt;img src="1.png" /&gt;
              &lt;div class="mask"&gt;
                  &lt;h2&gt;Android 4.0&lt;/h2&gt;
                  &lt;a href="#" class="info"&gt;$9.99&lt;/a&gt;
                  &lt;p&gt;
                      Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now!
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="main"&gt;
          &lt;div class="view view-fifth"&gt;
              &lt;img src="1.png" /&gt;
              &lt;div class="mask"&gt;
                  &lt;h2&gt;Android 4.0&lt;/h2&gt;
                  &lt;a href="#" class="info"&gt;$9.99&lt;/a&gt;
                  &lt;p&gt;
                      Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now!
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="main"&gt;
          &lt;div class="view view-fifth"&gt;
              &lt;img src="1.png" /&gt;
              &lt;div class="mask"&gt;
                  &lt;h2&gt;Android 4.0&lt;/h2&gt;
                  &lt;a href="#" class="info"&gt;$9.99&lt;/a&gt;
                  &lt;p&gt;
                      Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now!
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="main"&gt;
          &lt;div class="view view-fifth"&gt;
              &lt;img src="1.png" /&gt;
              &lt;div class="mask"&gt;
                  &lt;h2&gt;Android 4.0&lt;/h2&gt;
                  &lt;a href="#" class="info"&gt;$9.99&lt;/a&gt;
                  &lt;p&gt;
                      Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now!
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="main"&gt;
          &lt;div class="view view-fifth"&gt;
              &lt;img src="1.png" /&gt;
              &lt;div class="mask"&gt;
                  &lt;h2&gt;Android 4.0&lt;/h2&gt;
                  &lt;a href="#" class="info"&gt;$9.99&lt;/a&gt;
                  &lt;p&gt;
                      Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now!
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="main"&gt;
          &lt;div class="view view-fifth"&gt;
              &lt;img src="1.png" /&gt;
              &lt;div class="mask"&gt;
                  &lt;h2&gt;Android 4.0&lt;/h2&gt;
                  &lt;a href="#" class="info"&gt;$9.99&lt;/a&gt;
                  &lt;p&gt;
                      Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You     Buy Now! You Buy Now! You Buy Now! You Buy Now!
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>And the CSS</strong></p>
  
  <pre><code>.view {
      width: 180px;
      height: 160px;
      margin: 5px;
      float: left;
      overflow: hidden;
      position: relative;
      text-align: center;
      /*
      -webkit-box-shadow: 1px 1px 2px #e6e6e6;
      -moz-box-shadow: 1px 1px 2px #e6e6e6;
      box-shadow: 1px 1px 2px #e6e6e6;
      */
      cursor: default;
      background: #fff url() no-repeat center center;
      /*
      border-top: 2px solid #2e84c0;
      border-left: 2px solid #2e84c0;
      border-right: 2px solid #efefef;
      border-bottom: 4px solid #2e84c0;
      */
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
  }
  body {
      background-image:url    (../img/blue_line_background.jpg);
      min-width:1080px;
  }
  .view .mask,.view .content {
      width: 180px;
      height: 160px;
      position: absolute;
      overflow: hidden;
      top: 0;
      left: 0;
  }
  .view img {
      display: block;
      position: relative;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
  }
  .view h2 {
      text-transform: uppercase;
      color: #fff;
      text-align: center;
      position: relative;
      font-size: 15px;
      padding: 2px;
      background: rgba(0, 0, 0, 0.8);
      margin: 0 0 0 0;
  }
  .view p {
      font-family: Georgia, serif;
      font-style: italic;
      font-size: 12px;
      position: relative;
      color: #fff;
      /*padding: 10px 20px 20px;*/
      text-align: center;
  }
  .view a.info {
      display: inline-block;
      text-decoration:none;
      font-weight:bold;
      padding: 5px;
      background:;
      color: #359ce1;
      text-transform: uppercase;
      /* 
      -webkit-box-shadow: 0 0 1px #000;
      -moz-box-shadow: 0 0 1px #000;
      box-shadow: 0 0 1px #000;
      */
  }
  .view a.info: hover {
      -webkit-box-shadow: 0 0 5px #000;
      -moz-box-shadow: 0 0 5px #000;
      box-shadow: 0 0 5px #000;
  }
  .view-fifth img {
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
  } 
  .view-fifth .mask {
      background-color: #c3c3c3;
      -webkit-transform: translateX(-300px);
      -moz-transform: translateX(-300px);
      -o-transform: translateX(-300px);
      -ms-transform: translateX(-300px);
      transform: translateX(-300px);
      -ms-filter: "progid:     DXImageTransform.Microsoft.Alpha(Opacity=100)";
      filter: alpha(opacity=100);
      opacity: 1;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      border-bottom-left-radius: 5px;
      border-top-left-radius: 5px;
  } 
  .view-fifth h2 {
      background: rgba(255, 255, 255, 0.5);
      color: #000;
      -webkit-box-shadow: 0px 1px 3px rgba(159, 141,     140, 0.5);
      -moz-box-shadow: 0px 1px 3px rgba(159, 141, 140,     0.5);
      box-shadow: 0px 1px 3px rgba(159, 141, 140,     0.5);   
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
  }
  .view-fifth p {
      -ms-filter: "progid:     DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      opacity: 0;
      color: #000;
      -webkit-transition: all 0.2s linear;
      -moz-transition: all 0.2s linear;
      -o-transition: all 0.2s linear;
      -ms-transition: all 0.2s linear;
      transition: all 0.2s linear;
      border-bottom-left-radius: 5px;
      border-top-left-radius: 5px;
  }
  .view-fifth:hover .mask {
      -webkit-transform: translateX(0px);
      -moz-transform: translateX(0px);
      -o-transform: translateX(0px);
      -ms-transform: translateX(0px);
      transform: translateX(0px);
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
  }
  .view-fifth:hover img {
      -webkit-transform: translateX(300px);
      -moz-transform: translateX(300px);
      -o-transform: translateX(300px);
      -ms-transform: translateX(300px);
      transform: translateX(300px);
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
  }
  .view-fifth:hover p {
      -ms-filter: "progid:         DXImageTransform.Microsoft.Alpha(Opacity=100)";
      filter: alpha(opacity=100);
      opacity: 1;
  }
  </code></pre>
  
  <p>And for some reason.. the code entry button never works for me.. i have to enter 4 spaces per line Manually to post code..</p>