title: How to access element inside div in jquery and make exanding div transparent
body: <p>I want a specific div to expand when the user hovers over it.</p>
  
  <pre><code>     &lt;td&gt;&lt;h4&gt;Like Football&lt;/h4&gt;&lt;/td&gt;
  </code></pre>
  
  <p>I am unclear how to access an element inside a div tag. I also want the background of the expanding div to be transparent to a certain extent like done on <a href="http://www.sonyericsson.com/cws/cws/home?cc=us&amp;lc=en" rel="nofollow">this website</a> where Fifa 12 is displayed.
  Please help.</p>
  
  <pre><code>&lt;div&gt;
     &lt;a href=""&gt;
     &lt;img src="images/fifa.jpg" /&gt;&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="wrapper"&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;img src="images/arrow.jpg"  height="28" width="28"/ &gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;h4&gt;Like Football&lt;/h4&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  
      &lt;div class="wrapperhover"&gt;
  
          &lt;p class="wrappercontent" id="p"&gt;
              &lt;span&gt;Download FIFA 12 on Xperia™!&lt;/span&gt;
              &lt;a href="" onclick=""&gt;&lt;span&gt;Find more&lt;/span&gt;&lt;/a&gt;
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.wrapper
  {
          background-color:Black;
          color:White;
          width:245px;
          height:100px;
          margin-top:-100px;
          position:absolute;       
  }
  
  .wrapperhover
  {
      height:100px;
  }
  </code></pre>
  
  <p><strong>JQUERY</strong></p>
  
  <p>$(document).ready(function () {</p>
  
  <pre><code>    $(".wrapperhover").hide();
  
      $(".wrapper").hover(function () {
          $(".wrapperhover").show();
          var contentHeight = 0;
          $(this).children().each(function () {
              contentHeight += $(this).height();
          });
          $(this).animate({
           height: '150px',
           marginTop: "-150" 
          }, 300);
      }, function () {
          $(this).animate({
              height: '100px', marginTop: "-100"
          }, 300);
          $(".wrapperhover").hide();
      });
  
  });
  </code></pre>