Grow your CSS skills. Land your dream job.

dynamically created div overlap image

  • # May 7, 2013 at 8:41 am

    hello,

    i am making image slider . on click event of image i am creating div dynamically . also, i want to flip image and dynamic div must be visible.

    i have succeeded in creating Div dynamically and adding it to same position as image but image is getting move to right side but i want to overlap image .

    function flipIt(obj){

    $(obj).animate({“height”:”600px”,”width”:”320px”},50);
    $(obj).animate({“left”: “-=40px”,”opacity”: “0.65”},””,””,function () {

    //$(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).wrap($(‘

    ‘).css({
    “position” : “absolute”,
    “left” : $(obj).position().left,
    “top” : $(obj).position().top,
    “height” :$(obj).height(),
    “width” :$(obj).width(),

    }));

    );

    and css is :
    .foobar
    {
    position:absolute;
    top:0px;
    color:red;
    background-color: blue;
    background:blue;
    content: div is here;
    height:450px;
    width:250px;
    }

    # May 7, 2013 at 9:44 am

    I realise that it might be a language issue but I have no idea what it is you are trying to do.

    Do you have an example of a site where this is being done?

    # May 8, 2013 at 2:11 am

    i want to make image and div overlap each other

    # May 8, 2013 at 5:24 am

    >i want to make image and div overlap each other

    That’s not really enough to go on.

    As I said, can you provide an example site where this is being done?

    # May 8, 2013 at 9:50 am

    When I think ‘overlap’ and see position:absolute, I use z-index.

    Hope that helps.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".