title: css opacity on hover of div
body: <p>I am new to CSS. I just want a div over another div on hover and its transparency should increase. I have done some thing like that</p>
  
  <pre><code>&lt;div id="maincontainer"&gt;
  &lt;div id="picture"&gt;&lt;img src="bill.jpg" alt="Bill Gates"&gt;&lt;/div&gt;
  &lt;h1&gt;A floating image&lt;/h1&gt;
  &lt;p id="bill"&gt;&lt;/p&gt;
  &lt;div id="mem"&gt;sfasdf&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="column1"&gt;
  &lt;p&gt;Haec disserens qua de re agatur et in quo causa consistat non
  videt...&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="column2"&gt;
  &lt;p&gt;causas naturales et antecedentes, idciro etiam nostrarum
  voluntatum...&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="column3"&gt;
  &lt;p&gt;nam nihil esset in nostra potestate si res ita se haberet...&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="slide"&gt;
  &lt;ul&gt;
      &lt;li id="ims"&gt;&lt;img src="test.jpg" height="200" width="200" /&gt;&lt;/li&gt;
      &lt;li id="sp"&gt;&lt;/li&gt;
      &lt;li id="ims"&gt;&lt;img src="test.jpg" height="200" width="200" /&gt;&lt;/li&gt;
      &lt;li id="sp"&gt;&lt;/li&gt;
      &lt;li id="ims"&gt;&lt;img src="test.jpg" height="200" width="200" /&gt;&lt;/li&gt;
      &lt;li id="sp"&gt;&lt;/li&gt;
      &lt;li id="ims"&gt;&lt;img src="test.jpg" height="200" width="200" /&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="left"&gt;l&lt;/div&gt;
  &lt;div id="right"&gt;R&lt;/div&gt;
  </code></pre>
  
  <p>and css file is</p>
  
  <pre><code>body {
      background-color: #FFCC66;
      background-repeat: no-repeat;
      background-attachment: scroll;
      background-position: 50% 100%;
      margin-top: 100px;
      margin-right: 40px;
      margin-bottom: 100px;
      margin-left: 70px;
  }
  
  #picture {
      height: 200px;
      width: 170px;
      float: left;
  }
  
  #column1 {
      float: left;
      width: 33%;
  }
  
  #column2 {
      float: left;
      width: 33%;
  }
  
  #column3 {
      float: left;
      width: 33%;
  }
  
  #bill {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 12px;
      letter-spacing: 2px;
      text-align: justify;
      line-height: 20px;
  }
  
  #mem {
      position: absolute;
      top: 300px;
      left: 150px;
  }
  
  #slide {
      overflow: hidden;
      position: absolute;
      height: 220px;
      width: 300px;
      top: 500px;
      left: 400px;
      background-color: #333399;
      z-index: 1;
  }
  
  #left {
      position: absolute;
      top: 500px;
      left: 400px;
      height: 220px;
      width: 30px;
      background-color: #FF33CC;
      z-index: 2;
      text-align: center;
      color: #000000;
      vertical-align: middle;
      opacity: .5;
  }
  
  #left :hover {
      position: absolute;
      top: 500px;
      left: 400px;
      height: 220px;
      width: 30px;
      background-color: #CCCC00;
      z-index: 2;
      text-align: center;
      color: #000000;
      filter: alpha(opacity = 10);
      -moz-opacity: 10;
      -khtml-opacity: 10;
      opacity: 10;
      cursor: pointer;
  }
  </code></pre>
  
  <p>I want to increase transparency of div with id left on hover</p>