title: scrolling up set of pictures up and down on hover function
body: <p>I have been working on a portfolio for a small firm that I have. I was planning to have the same function as this one from e-onetime <a href="http://eone-time.com/#team" rel="nofollow">http://eone-time.com/#team</a> do you think this is possible with a gif image. The function that I would like to have is that on hover gif animated 1 time, or should I set multiple images like what they did on their portfolio and let it scroll up and down onclick.</p>
  
  <p>This is a section from my TEAM section in which the static gif and animated gif is located:</p>
  
  <pre><code>&lt;!-- Team Section --&gt;
  &lt;section id="team" class="content-section text-center"&gt;
      &lt;div class="team-section"&gt;
          &lt;div class="container"&gt;
              &lt;div class="col-lg-8 col-lg-offset-2"&gt;
                  &lt;h1&gt;TEAM&lt;/h1&gt;
                  &lt;HR&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;!-- Team Grid  --&gt;&lt;section class="main"&gt;
      &lt;div id="items"&gt;
          &lt;div class="item"&gt;
              &lt;a id="1" class="work page-scroll"&gt;
                  &lt;img class="media" src="img/tryimages/greggy.png"/&gt;
                  &lt;div class="content"&gt;
                  &lt;img class="media" src="img/tryimages/greggy.gif"/&gt;
                  &lt;!--&lt;h2 class="title"&gt;Click&lt;/h2&gt;!--&gt;
                  &lt;/div&gt;
              &lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div class="item"&gt;
              &lt;a id="2" class="work page-scroll"&gt;
                  &lt;img class="media" src="img/tryimages/dennise.png"/&gt;
                  &lt;div class="content"&gt;
                  &lt;img class="media" src="img/tryimages/dennise.gif"/&gt;
                  &lt;/div&gt;
              &lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div class="item"&gt;
              &lt;a id="3" class="work page-scroll"&gt;
                  &lt;img class="media" src="img/tryimages/jm.png"/&gt;
                  &lt;div class="content"&gt;
                  &lt;img class="media" src="img/tryimages/jm.gif"/&gt;
                  &lt;/div&gt;
              &lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div class="item"&gt;
              &lt;a id="4" class="work page-scroll"&gt;
                  &lt;img class="media" src="img/tryimages/hannah.png"/&gt;
                  &lt;div class="content"&gt;
                  &lt;img class="media" src="img/tryimages/hannah.gif"/&gt;
                  &lt;/div&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;&lt;!-- End of Works Grid  --&gt;
  </code></pre>
  
  <p>This is the javascript function I have for my team profiler:</p>
  
  <pre><code>&lt;/script&gt;
  &lt;!--Team JS Function!--&gt;
  &lt;script&gt;
  $("#items a").click(function() {
    var id = $(this).attr("id");
    $("#pages div, #pages2 div").siblings().hide("slow");
    $("#pages div#" + id + "").toggle("slow");
  });
  $("#items2 a").click(function() {
    var id = $(this).attr("id");
    $("#pages2 div, #pages div").siblings().hide("slow");
    $("#pages2 div#" + id + "").toggle("slow");
  });
  &lt;/script&gt;   
  </code></pre>