CODEWITHSUNDEEP
jqueryhtmlstylesheetthis
George
George

Reputation: 2110

Image over image animation Jquery

I have a horizontal unordered list of 2 images. Intent is to make the hovered image getting bigger(with Jquery) without moving the neighbour image. Code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <style type="text/css">
            ul#thumbs li {
                display: inline;
                list-style: none;
            }
            a img {
                position: relative;
                -webkit-border-radius: 20px;
                border: 2px solid blue;
            }
            a img:hover {
                -webkit-border-radius: 20px;
                border: 2px solid yellow;
            }
        </style>
    </head>
    <body>
    <ul id="thumbs">
        <li><a href="#"><img src="img/bono.jpg" width="420" height="300" border="none"/></a></li>
        <li><a href="#"><img src="img/abstr.jpg" width="420" height="300" border="none"/></a></li>
    </ul>
        <script>
        $('a img').mouseover(function(){
            $(this).delay(1500).animate({
                width: "630px",
                height: "450px",
            }, 1500 );
            $(this).css("z-index","1000");
            $(this).css("overflow","visible");
            $(this).css("position","absolute");
        });
        $('a img').mouseout(function(){
        $(this).animate({
            width: "420px",
            height: "300px",
        }, 500 );
        });
        </script>
    </body>
</html>

Upvotes: 0

Views: 2681

Answers (1)

vinceh
vinceh

Reputation: 3510

I think what you want is something like this.

The key is playing with the margins.

Upvotes: 2

Related Questions