Создать div в том же положении изображения

Question

Я сделал изображение слайдера. При щелчке изображения я динамически создаю div с некоторым текстом. В событии onClick изображения, я добавил div к изображению, а затем изображение перевернуто и div должно быть видимым. Но изображение появляется в правой части страницы. Как я могу использовать ту же позицию, что и позиция изображения?

Этот код я использую к создать div, а затем добавить изображение к нему:

function flipIt(obj){ 
    //$(obj).wrap("<div class='centerImage'></div>") 

    console.log("value before Function status "+status); 

    $(obj).wrap($('<div class="foobar"/>').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); 
} 

CSS свойство из .foobar DIV:

.foobar 
{ 
    -webkit-backface-visibility:visible; 
    position:absolute; 
    color:red; 
    background-color: red; 
    background:red; 
    content: div is here; 
    height:450px; 
    width:250px; 
} 

Как принести div на позиция выбранного img?

Answer 1

$("#id").html("<div class='foobar'>This is div</div>")
Дайте имя идентификатору DIV, в котором изображение присутствует

Answer 2

Попробуйте этот код:

$("#id").wrap('<div class="foobar"/>'); 

See Demo