Edit Question - KnowledgeHub

Title Body

Is there a way, using Jquery to grow and then shrink an image (with animation so it looks smooth) on hovering without affecting the layout too much (I'm assuming the padding would have to shrink and then grow as well). With a bit of messing around, I finally came up with the solution, thanks to everyone who helped out. <html> <head> <style type="text/css"> .growImage {position:relative;width:80%;left:15px;top:15px} .growDiv { left: 100px; top: 100px;width:150px;height:150px;position:relative } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> </head> <body> <div class="growDiv"> <img class="growImage" src="image.jpg" alt="my image"> </div> <script type="text/javascript"> $(document).ready(function(){ $('.growImage').mouseover(function(){ //moving the div left a bit is completely optional //but should have the effect of growing the image from the middle. $(this).stop().animate({"width": "100%","left":"0px","top":"0px"}, 400,'swing'); }).mouseout(function(){ $(this).stop().animate({"width": "80%","left":"15px","top":"15px"}, 200,'swing'); });; }); </script> </body></html>

Tags (comma-separated) Cancel