Question

I am currently working on a images gallery now. It is working correctly except in Google Chrome when you hover over the top row, the row beneath will start to vibrate and move. You can find a working example here.

The HTML:

     <div id="gallery">
             <a href="<?php echo'?img=$imgname';?>"  > 
                           <span c

lass="title"><?php echo'$imgtitle';?></span>
                             <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>

                      <a href="<?php echo'?img=$imgname';?>" >
                       <span class="title"><?php echo'$imgtitle';?></span>
                             <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>
                         <a href="<?php echo'?img=$imgname';?>" > 
                         <span class="title"><?php echo'$imgtitle';?></span>
                            <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>

                        <a href="<?php echo'?img=$imgname';?>" > 
                        <span class="title"><?php echo'$imgtitle';?></span>
                             <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>

                      <a href="<?php echo'?img=$imgname';?>"  >
                       <span class="title"><?php echo'$imgtitle';?></span>
                             <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>
                         <a href="<?php echo'?img=$imgname';?>" > 
                         <span class="title"><?php echo'$imgtitle';?></span>
                             <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>

                      <a href="<?php echo'?img=$imgname';?>"  >
                       <span class="title"><?php echo'$imgtitle';?></span>
                             <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>
                         <a href="<?php echo'?img=$imgname';?>"  >
                          <span class="title"><?php echo'$imgtitle';?></span>
                             <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>

                         <a href="<?php echo'?img=$imgname';?>"  >
                          <span class="title"><?php echo'$imgtitle';?></span>
                             <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>
                        <a href="<?php echo'?img=$imgname';?>"  > 
                        <span class="title"><?php echo'$imgtitle';?></span>
                             <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>
                         <a href="<?php echo'?img=$imgname';?>"  > 
                         <span class="title"><?php echo'$imgtitle';?></span>
                             <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>
    </div>

The CSS

#gallery {
    width: 100%; 
    margin-top: 100px;
    padding-bottom: 100px;
    display:block;
    text-align:center;
}

#gallery a {
    display: inline-block;
    margin: 0 12.5px 25px 12.5px;
    position: relative;
    height:150px;
    width:225px;
}

#gallery a img {
    height:150px;
    width:225px;
    position:relative;
}

The Jquery

$(document).ready(function() {  
     $("#gallery a img").hover(function(){
            $(this).css({"z-index":"99"}); 
             $(this).stop(true, false).animate({ "margin-left":"-112.5px",
                    "margin-top":"-150px",
                    "bottom":"-75px",
                    "height":"300px",
                    "width":"450px"
                    });
        }, function() {
        $(this).css({"z-index":"0"}); 
             $(this).stop(true, false).animate({"height":"150px",
                    "width":"225px",
                    "margin-left":"0px",
                    "margin-top":"0px",
                    "bottom":"0px"
                 });
        });
});

P.S. If you zoom out more it’s more noticeable.

Thanks in advance for any help.

Answer 1

I fixed the problem with your guys help. All I had to do was change this:

    // ...   
$(this).stop(true, false).animate({"height":"150px",
    "width":"225px",
    "margin-left":"0px",
    "margin-top":"0px",
    "bottom":"0px"
}, function(){
    // Do this last
    $(this).css({"z-index":"0"}); 
});
// ...

to this:

#gallery a img {
height:150px;
width:225px;
position:absolute;
left:0px;
}