enlarge div on rollover

[1internet]

I have been trying to create a rollover effect that enlarges a div in the results page. Identical to the old google image results, when you rollover an image it would enlarge.

I am currently doing this through jquery animate

$('.product_result').hover(function(){
	$(this).css('position', 'relative')
	$(this).animate({ 
		'width': '220px',
		'height': '286px',
		'margin-left': '-6px',
		'margin-top': '-6px'
		}, 'fast');
	},function(){
	$(this).animate({
		'width': '200px',
		'height': '260px',
		'margin-left': '6px',
		'margin-top': '6px'
		}, 'fast');
});

The problem is with this code is that it distorts the position of all other elements I want it to do the equivalent effect of being position absolute, when the height and width are increased, as to not affect layouts.

[Irate]

Try applying 'position: fixed;' to all other elements which you don't want to be moved.

Also you could try setting the z-index of the div to 999 when hovering over it.

[1internet]

Naa, didn't do it.

[Irate]

How about adding !important to it? :/

 

To be honest, err, change the whole CSS you are using to fit the needs of it, that would be my suggestion.

[nogray]

Try changing  $(this).css('position', 'relative') to $(this).css('position', 'absolute') and add a spacer element for the original size underneath to hold it's space.

Edited May 3, 2013 by nogray