title: How to fade an image when you hover over the div it's in?
body: <p>I have a large div with a small image inside of it. I want to make the image fade when I hover over the div, even when the mouse isn't directly over the image itself.</p>
  
  <p>The div is much bigger than the image, so I'm not going to add transparency around the image or change the image size or anything like that.</p>
  
  <p>I just want it to fade when the mouse hovers over the div it's in.</p>
  
  <p>Here's the code I have so far, but it won't be useful:</p>
  
  <pre><code>&lt;div id="left"&gt;
      &lt;img id="logoLeft" src="http://i.imgur.com/CJ7el5l.png" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#left {
      background-color: #f0f0ee;
      float: left;
      width: 50%;
      min-height: 100%;
  }
  
  #logoLeft {
      float: right;
      margin-top: 2.5em;
  }
  </code></pre>