title: Darken image in div on hover, but not another child image
body: <p>On hover, I'm trying to change the opacity of the main parent to darken the main image, but I want to show another image over it in full opacity. Here's what I tried, but it's not working.</p>
  
  <pre><code>  &lt;div class="masonry-item"&gt;
    &lt;div class="masonry-item1"&gt;
  
      &lt;a href="#" class="image"&gt;
        &lt;div class="caption"&gt;
          &lt;h3&gt;&lt;img src="blah" /&gt;&lt;/h3&gt; &lt;!-- DARKEN THIS --&gt;
        &lt;/div&gt;
         &lt;img src="blah" /&gt; &lt;!-- KEEP FULL OPACITY --&gt;
       &lt;/a&gt;
   &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>my css:</p>
  
  <pre><code>  .masonry-container .masonry-item .image:hover .caption {
     opacity: 1;
  
    }
  
   .masonry-container .masonry-item a.image:hover img {
    opacity: .2; /* this seems to darken everything, but when removed darkening doesn't work */
  
   }
  
   .masonry-container .masonry-item1:hover {
     background-color: rgba(222,222,222,.5);
     z-index:98;
   }
  </code></pre>
  
  <p>Here's an example of what I'm trying to do:
  <a href="http://screencast.com/t/7qDUmCJMNd" rel="nofollow">http://screencast.com/t/7qDUmCJMNd</a></p>