title: Only target one div .on() hover, not all - Jquery
body: <p>I'm currently using the code to animate opacity to 1 on mouseenter of an image and back to 0 again on mouseleave. Instead of it displaying one image, it displays all on hover. </p>
  
  <p>I've tried using <code>(this)</code> instead of <code>(.project-hover img)</code> so it only affects that particular div but I need to target <code>(.project-hover img)</code> instead of <code>.span4</code> upon which the function is initiated from. </p>
  
  <p>How would I go about achieving this?</p>
  
  <pre><code>$(document).ready(function() {
      $(".span4").on("mouseenter", function() {
          $('.project-hover img').stop();//halts previous animation if it's running
          $('.project-hover img').animate({
              opacity: 1
          });
      }).on("mouseleave", function() {
          $('.project-hover img').stop();
          $('.project-hover img').animate({
              opacity: 0
          });
      });
  });
  </code></pre>
  
  <h3>HTML</h3>
  
  <pre><code>&lt;div class="span4"&gt;
      &lt;div class="wrap-title"&gt;
          &lt;div class="position"&gt;
              &lt;div class="title"&gt;&lt;a href="&lt;?php echo get_permalink(); ?&gt;"&gt;&lt;?php the_title();?&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;div class="tags"&gt;&lt;?php echo $cats; ?&gt; &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;  
      &lt;div class="project-hover"&gt;&lt;img src="&lt;?php echo catch_that_image(); ?&gt;"&gt;    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>