title: Make text appear somewhere else on hover
body: <p>I have an image, and when I hover over the image, I want to make text appear somewhere else on the screen.  I've found lots of solutions making text appear on the image, but not somewhere else on the page.  Any ideas?</p>
  
  <p>Here's what I'm trying:
  HTML:</p>
  
  <pre><code>&lt;div class="dan-profile-picture"&gt;&lt;/div&gt;
  blah blah blah
  &lt;div class="dan-profile"&gt;lots of text&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div.dan-profile-picture {
      width: 150px;
      height: 150px;
      border-radius: 75px;
      -webkit-border-radius: 75px;
      -moz-border-radius: 75px;
      background: url(./images/dan.jpg) no-repeat;
      border:3px solid black;
  }
  div.dan-profile {
      display:none;
  }
  div.dan-profile-picture:hover {
      opacity:0.5;
  }
  div.dan-profile-picture:hover + div.dan-profile {
      display:block;
  }
  </code></pre>