title: Affecting div:hover with another div
body: <p>I'm making a gallery where when you hover over the main image, the thumbnails should become transparent. I would like to achieve this with pure CSS, but I'm not sure if that's possible.</p>
  
  <p>CSS:</p>
  
  <pre><code>/* should affect thumbs but not main */
  /* obviously this code wouldn't work */
  #main:hover, #thumbs {
    opacity: .5;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="main"&gt;
    Hover over me to change #thumbs
  &lt;/div&gt;
  &lt;div id="thumbs"&gt;
    I change when you hover over #main
  &lt;/div&gt;
  </code></pre>
  
  <p>Is this possible using pure CSS?</p>