title: Create div at the same position of image
body: <p>I have made an image slider. On click of an image I am dynamically creating a <code>div</code> with some text. In the onClick event of the image, I have added a <code>div</code> to the image, and then the image is flipped and <code>div</code> should be visible. But the image is appearing to the very right side of the page. How do I give it the same position as the image position?</p>
  
  <p>This code I am using to a create <code>div</code> and then add an image to it:</p>
  
  <pre><code>function flipIt(obj){
      //$(obj).wrap("&lt;div class='centerImage'&gt;&lt;/div&gt;")
  
      console.log("value before Function status   "+status);
  
      $(obj).wrap($('&lt;div class="foobar"/&gt;').css({
          "position" : "absolute",
          "left"     : $(obj).position().left,
          "top"      : $(obj).position().top,
          "height"   :$(obj).height(),
          "width"    :$(obj).width(),
      }));
      $
      alert('classes ..'+$(obj).hasClass("foobar").toString());
      $(obj).animate({"left": "-=40px","opacity": "0.65"},"slow");
      $(obj).animate({"height":"600px","width":"320px"},30);
  
      $(obj).css("-webkit-backface-visibility","hidden");
      $(obj).css("-webkit-transform-style","preserve-3d");
      $(obj).css("-webkit-transition","all 1.0s linear");
      $(obj).css("transform-style","preserve-3d");
      $(obj).css("transition","all 1.0s linear");
  
      $(obj).css("-webkit-transform","rotateY(180deg)");
      $(obj).css("transform","rotateY(180deg)");
      //$(obj).css("box-shadow","-5px 5px 5px #aaa");
  
      status=0;
      console.log("after if value set status   "+status);
  }
  </code></pre>
  
  <p>CSS property of .foobar div:</p>
  
  <pre><code>.foobar
  {
      -webkit-backface-visibility:visible;
      position:absolute;
      color:red;
      background-color: red;
      background:red;
      content: div is here;
      height:450px;
      width:250px;
  }
  </code></pre>
  
  <p>How do I bring the <code>div</code> on the position of that selected <code>img</code>?</p>