title: How do I get a jquery function to only affect the child element of 'this'
body: <p>I building a simple (crude, in fact) gallery in html / twig, css and jquery. In the gallery I am trying to make a function that activates when the user hovers over an image. The function will fade-in a child div (that is hidden) and fade-out on when the user moves the cursor away from the div.</p>
  
  <p>The problem I am running in to is that the function is not only affecting the child element, but also the parent (which I want to avoid).</p>
  
  <p><br />
  <strong>jquery:</strong></p>
  
  <pre><code>$(".gallery_image_wrapper").hover(function(){
      $(this).find(':last-child').fadeOut(100);
      $(this).find(':first-child').fadeIn(500);
  });
  </code></pre>
  
  <p><br />
  <br />
  <strong>html/twig (symfony)</strong></p>
  
  <pre><code>&lt;div class="gallery_image_wrapper"&gt;
        &lt;div class="gallery_image"&gt;
            &lt;a href="#"&gt;
                &lt;img src="/web/images/pieceimages/{{ image.path }}" /&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="gallery_mouseover"&gt;
            &lt;div class="gallery_piece_info" align="center"&gt;
                &lt;span class="gallery_info_title"&gt;
                    {{ image.pieceTitle }}
                &lt;/span&gt;
                &lt;br /&gt;
                &lt;span class="gallery_info_artist"&gt;
                    {{ image.artistName }}
                &lt;/span&gt;
                &lt;br /&gt;
                &lt;br /&gt;
                &lt;span class="gallery_info_more"&gt;
                    Learn More
                &lt;/span&gt;
            &lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><br />
  <strong>css</strong></p>
  
  <pre><code>.gallery_image_wrapper {
        float: left;
        position: relative;
        margin: 10px;
   }
   .gallery_mouseover {
        height: 100%;
        width: 100%;
        background-image: url({{ asset('/web/images/mouseover.png') }});
        position: absolute;
        top: 0px;
   }
   .gallery_piece_info {
        color: #ffffff;
        margin-left: auto;
        margin-right: auto;
        text-transform: uppercase;
        margin-top: 30%;
   }
   .gallery_info_title {
        font-size: 16pt;
        font-family: "Giacomo";
   }
   .gallery_info_artist {
        font-size: 12pt;
        font-family: "Giacomo Light";
   }
   .gallery_info_more {
        font-size: 9pt;
        font-family: "Giacomo Light";
   }
  </code></pre>
  
  <p><br />
  How would I accomplish this?</p>