title: Adding Image Caption using JQuery
body: <p>I am trying to add an image caption to a div, the code below works fine and does what I want, however I would like to ask your advise to make the code a bit shorter :) I believe that there is a better way to do so, but I couldn't find it.</p>
  
  <p>Thanks in advance. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="firstBlock" class="block"&gt;&lt;p class="caption c1"&gt;Description&lt;/p&gt;&lt;/div&gt;
  &lt;div id="secondBlock" class="block"&gt;&lt;p class="caption c2"&gt;Description&lt;/p&gt;&lt;/div&gt;
  &lt;div id="thirdBlock" class="block"&gt;&lt;p class="caption c3"&gt;Description&lt;/p&gt;&lt;/div&gt;
  &lt;div id="fourthBlock" class="block"&gt;&lt;p class="caption c4"&gt;Description&lt;/p&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JQuery</p>
  
  <pre><code>    $("#firstBlock").hover(
          function(){
      $(".caption.c1").animate({"margin-left": "0px"});
          },
          function(){
      $(".caption.c1").animate({"margin-left": "-200px"});
          }
      );
  
      $("#secondBlock").hover(
          function(){
      $(".caption.c2").animate({"margin-left": "0px"});
          },
          function(){
      $(".caption.c2").animate({"margin-left": "-200px"});
          }
      );
  
      $("#thirdBlock").hover(
          function(){
      $(".caption.c3").animate({"margin-left": "0px"});
          },
          function(){
      $(".caption.c3").animate({"margin-left": "-200px"});
          }
      );
  
      $("#fourthBlock").hover(
          function(){
      $(".caption.c4").animate({"margin-left": "0px"});
          },
          function(){
      $(".caption.c4").animate({"margin-left": "-200px"});
          }
      );
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.caption{
  height: 150px;
  width: 200px;
  text-align: center;
  margin-left: -200px;
  margin-top: 350px;
  background: black;
  color: white;
  }
  </code></pre>