title: Make image visible on div:hover but not if another image in that div is hovered?
body: <p>On my <a href="http://element17.com" rel="nofollow">photography portfolio</a>, I have thumbnails set up so that when you hover over the thumbnail (which are actually divs with background-image set to the thumbnail), a magnifying glass icon (which is an absolute-positioned img) is set via CSS to opacity:1.0.</p>
  
  <p>However, for some images I'll have wallpapers available for download (the first image in the top-left is an example).  To indicate this, I'll have a monitor icon (also absolute-positioned) inside this div as well (in the opposite corner).  When this image is hovered over, I don't want the magnifying glass icon to appear.</p>
  
  <p>EDIT:</p>
  
  <p>Here is the actual HTML as generated by PHP:</p>
  
  <pre><code>&lt;div class="thumbnail" style="width:240px; height:160px;"&gt;
    &lt;a href="gallery/01_CONSTRUCTS/Steam.jpg" class="shadowbox[CONSTRUCTS]" title="Steam"&gt;
      &lt;span class="rounded_corners thumb_back" style=" background-image:url('gallery/01_CONSTRUCTS/thumbs/Steam_thumb.jpg');"&gt;&amp;nbsp;&lt;/span&gt;
      &lt;span class="rounded_corners hover_dim"&gt;&amp;nbsp;&lt;/span&gt;
      &lt;img class="zoom" src="images/zoom.png" alt="Zoom" /&gt;
    &lt;/a&gt;
    &lt;img class="thumb_new" src="images/new.png" alt="New" /&gt;
    &lt;a class="wall_hover" href="gallery/01_CONSTRUCTS/wallpaper/Steam.jpg"&gt;
      &lt;img class="wallpaper" src="images/monitor.png" alt="DownloadWallpaper" /&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the relevant CSS:</p>
  
  <pre><code>.thumbnail {
    display: block;
    position: relative;
    float: left;
  }
  
  .thumbnail:hover, .thumbnail:hover .zoom {
    opacity: 1.0;
    -webkit-opacity: 1.0;
    -moz-opacity: 1.0;
  }
  
  .thumbnail a.wall_hover + a .zoom {
    display: none;
  }
  
  .thumb_new {
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 100;
  }
  
  .zoom {
    position: absolute;
    bottom: 3px;
    right: 3px;
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    transition: opacity .25s ease-in;
    -webkit-transition: opacity .25s ease-in;
    -moz-transition: opacity .25s ease-in;
  }
  
  .hover_dim {
    background-color: rgba(0,0,0,0.5);
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    transition: background-color .25s ease-in;
    -webkit-transition: background-color .25s ease-in;
    -moz-transition: background-color .25s ease-in;
  }
  
  .thumbnail:hover .hover_dim {
    background-color: rgba(0,0,0,0);
  }
  
  .wallpaper {
    position: absolute;
    bottom: 3px;
    left: 3px;
  }
  
  .rounded_corners {
    padding: 0;
    margin: 0 5px 5px 0;
    border: 0;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
  }
  </code></pre>