title: Flickering colors while hovering css
body: <p>I'm trying to use a background image over a semi-transparent div element, where hovering over either one changes the background color. However, I'm encountering a flickering effect when moving my mouse over either element.</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="test"&gt;&lt;/div&gt;
    &lt;div class="first box"&gt;&lt;/div&gt;
    &lt;div class="third box"&gt;third&lt;/div&gt;
    &lt;div class="second box"&gt;second&lt;/div&gt;
    &lt;div class="fourth box"&gt;fourth&lt;/div&gt;
    &lt;div class="last box"&gt;last&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html, body, 
  .container {
      height: 100%; 
      min-height: 100%;
  }
  
  .box {
      width: 191px;
      height: 145px;
      margin: 4px;
      float: left;
      background-color: black;
  }
  
  .box:hover{
      background-color:#EF6939;
      opacity: 1;
      overflow: hidden;
  }
  
  .test:hover{
      background-color:#EF6939;
      overflow: hidden;
  }
  
  .test {
      width: 191px;
      height: 145px;
      margin: 4px;
      float: left;
      position: absolute;
      /*  background-image: url(test.png);*/
  }
  
  .first {
      /* float: left; */
      /* background-color: red; */
      opacity: 0.1;
  }
  
  .second{
      /*     float: left;*/    
      /* background-color: green; */
  }
  
  .third{
      /* float: right; */
      /*  background-color: blue; */
  }
  
  .fourth {
      /* float: right; */
      /*  background-color: #DDDDDD; */
  }
  
  .last{
      /* float: right; */
      /*  background-color: yellow; */
  }
  </code></pre>
  
  <p>Here is a link to my code:
  <a href="http://jsfiddle.net/YTDyL/" rel="nofollow">http://jsfiddle.net/YTDyL/</a></p>