My thumbnail animation increases in size on hover, but it is affecting the position of the other images.
The issue is that when hovering over an image, the others move down and to the right to make space for the animated one. I want the other images to stay in place while one is being animated.
$num and the for loop are used to pull images from a MySQL table, please ignore
<html>
<?php
for($i; $i < $num; $i++){
echo "<img class='img' id='img" . $i . "' />";
}
?>
<script>
$('.img').hover(
function(){
$(this).animate({
width: "+=14",
height: "+=14",
left: "-7",
bottom: "-7"
});
}, function(){
$(this).animate({
width: "-=14",
height: "-=14",
left: "0",
bottom: "0"
});
}
);
</script>
<css>
.img{
padding: 10px;
position: relative;
cursor: pointer;
}
</html