title: hover effect not working after Jquery
body: <p>I am currently making a website for an architecture firm, HLArchitects. 
  In the projects page I have created an HTML / Javascript image gallery.
  When you hover over a smaller thumbnail the opacity changes from 0.5 to 1.
  It can be viewed here for reference: <a href="http://www.hla.co.za/projects/Hyuandai_Training_Centre/" rel="nofollow">http://www.hla.co.za/projects/Hyuandai_Training_Centre/</a> </p>
  
  <p>My problem is that after you click on one of the smaller thumbnails, which changes the bigger picture above it, and then try to hover over another smaller thumbnail, it no longer changes opacity. I used a simple CSS <code>:hover</code> to change the opacity along with <code>transition: opacity 0.2s</code>. Here is the Javascript / Jquery for the on click event of he thumbnail:</p>
  
  <pre><code>var imageFlow = document.getElementById("imageFlow");
  var img = imageFlow.getElementsByTagName("img");
  
  $("#imageFlow img").click(function(){
      var src = $(this).attr("src");
      if (src != $('#displayImg img').attr("src")){
          $('#displayImg img').fadeOut(200);
          setTimeout(function(){$("#displayImg img").attr("src",src);}, 200);
          $('#displayImg img').fadeIn(200);
      }
  
      for (var i = 0; i &lt; img.length; i++) {
          $(img[i]).css("opacity","0.5");         
      }
      $(this).css("opacity","1");
  
  })
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div id="displayImg"&gt;
          &lt;img src="images/095.jpg"&gt;
      &lt;/div&gt;
  
      &lt;div id="imageFlow"&gt;
          &lt;img src="images/095.jpg" alt="095" width="" height="" /&gt;
          &lt;img src="images/105.jpg" alt="105" width="" height="" /&gt;
          &lt;img src="images/106.jpg" alt="106" width="" height="" /&gt;
          &lt;img src="images/110.jpg" alt="110" width="" height="" /&gt;
          &lt;img src="images/133.jpg" alt="133" width="" height="" /&gt;
          &lt;img src="images/137.jpg" alt="137" width="" height="" /&gt;
          &lt;img src="images/138.jpg" alt="138" width="" height="" /&gt;
          &lt;img src="images/141.jpg" alt="141" width="" height="" /&gt;
          &lt;img src="images/145.jpg" alt="145" width="" height="" /&gt;
          &lt;img src="images/149.jpg" alt="149" width="" height="" /&gt;
          &lt;img src="images/160.jpg" alt="160" width="" height="" /&gt;
          &lt;img src="images/DSC_0077.jpg" alt="DSC_0077" width="" height="" /&gt;
          &lt;img src="images/DSC_0091.jpg" alt="DSC_0091" width="" height="" /&gt;
          &lt;img src="images/DSC_0092.jpg" alt="DSC_0092" width="" height="" /&gt;
          &lt;img src="images/DSC_0093.jpg" alt="DSC_0093" width="" height="" /&gt;
          &lt;img src="images/DSC_0252.jpg" alt="DSC_0252" width="" height="" /&gt;
          &lt;img src="images/DSC_0357.jpg" alt="DSC_0357" width="" height="" /&gt;
          &lt;img src="images/DSC_0360.jpg" alt="DSC_0360" width="" height="" /&gt;
          &lt;img src="images/DSC_0380.jpg" alt="DSC_0380" width="" height="" /&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I would really appreciate a solution to this so that the hover effect works even after you click on one of the thumbnails. <br>
  Thank you in advance</p>