title: How do I show a hidden div using jQuery Toggle?
body: <p>I have a portfolio section I am building on a page that displays a thumbnail of an image. I also have a hidden div that contains information about the portfolio project that I would like to show when a user mouses over the thumbnail.</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div class="portfolio"&gt;
      &lt;a href="#"&gt;&lt;img src="photos/work_2.jpg" alt="work_1" width="181" height="180"&gt;&lt;/a&gt;
      &lt;div class="portfolio-overlay" style="display:none;"&gt;
          &lt;p class="client-name"&gt;Encore Azalea&lt;/p&gt;
          &lt;div class="white-line"&gt;&lt;/div&gt;
          &lt;p class="services"&gt;website redesign +&lt;br /&gt;mobile site launch&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the jQuery:</p>
  
  <pre><code>&lt;script&gt;
  $(".portfolio a").hover(function () {
  $(".portfolio-overlay").toggle("slow");
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>My intent is to display .portfolio-overlay when you mouse over the image and hide it when you mouse out. </p>
  
  <p>I know there is something missing with the jQuery but, if I knew what it was, I wouldn't be posting this (you know how it goes).</p>
  
  <p>Thanks.</p>