Based on the jQuery hover image color-changing zoom effect, jquery hover zoom-in effect

Based on the jQuery hover image color-changing zoom effect, jquery hover zoom-in effect

Sharing a jQuery-based hover image color-changing zoom-in effect is a responsive code for hovering over an image. As follows:

Download Online Preview source code

Implementation code.

Html code:

 <div style="width: 620px; margin: 40px auto 0 auto;">        <div class="img">            <div class="inner">                <div>                    </div>                <div>                    </div>            </div>        </div>        <div class="img">            <div class="inner">                <div>                    </div>                <div>                    </div>            </div>        </div>        <div class="img">            <div class="inner">                <div>                    </div>                <div>                    </div>            </div>        </div>        <div class="img">            <div class="inner">                <div>                    </div>                <div>                    </div>            </div>        </div>        <div class="img">            <div class="inner">                <div>                    </div>                <div>                    </div>            </div>        </div>        <div class="img">            <div class="inner">                <div>                    </div>                <div>                    </div>            </div>        </div>    </div>    <script type="text/javascript">        $(".img").mouseenter(function () {            var $this = $(this);            var $div = $this.find(".inner div");            $div.eq(1).stop();            $div.eq(1).css({ "top": "0px", "left": "0px", "width": "200px", "height": "200px" });            $div.eq(0).stop().animate({ "top": "-25px", "left": "-25px", "width": "250px", "height": "250px", "opacity": "0" }, 500);            $div.eq(1).stop().animate({ "top": "-25px", "left": "-25px", "width": "250px", "height": "250px", "opacity": "1" }, 500);        }).mouseleave(function () {            var $this = $(this);            var $div = $this.find(".inner div");            $div.eq(0).stop().animate({ "top": "0", "left": "0", "width": "200px", "height": "200px", "opacity": "1" }, 500);            $div.eq(1).stop().animate({ "top": "0", "left": "0", "width": "200px", "height": "200px", "opacity": "0" }, 500);        });        </script>

Via: http://www.w2bc.com/Article/41297