locked
problem with overflow and animation only in Chrome RRS feed

  • Question

  • User1287536547 posted

    I have a hover animation that "raises" an overlay into a div on hover. The overflow is hidden so it looks like it comes in behind the frame of the div.  Works fine in IE and FireFox, but it Chrome it pops in front of the frame div it is in, which has its over-flow to hidden. I have tried making the animated div absolute and setting the z-index but nothing works.

    here is the css:(The screen is the div that is animated)

    #car_overlay
    {
        height:407px;
        width:408px;
        border-radius:300px;
        ;
        left:37px;
        top:15px;
        overflow:hidden;
        cursor:pointer;
        z-index:14;
    }
    #screen
    {
        height:203px;
        width:408px;
        background:url('/images/CarOverlay.png');
        margin-top:408px;
        text-align:center;
    
    }

    Here is the mark-up:

    <div id="car_overlay">
    
          <div id="screen">
    
                <h2>My car I just tricked out!</h2>
    
                <img alt="stars" id="big_stars" src="images/BigStar.png" />
    
                <h4>carDude1987</h4>
    
          </div><!--end screen-->
    
    </div><!--end of car_overlay-->

    and my jquery:

    var carOverlay = $('#car_overlay');
    var screen = $('#screen');
    
    carOverlay.hover(function () {
    
          screen.stop().animate({ marginTop: "204px" }, 400);
    
          }, function () {
    
          screen.stop().animate({ marginTop: "408px" }, 400);
    });

    thanks in advance!



    Saturday, January 12, 2013 2:06 PM

All replies