JQuery image hover effect?

Overall I think this is what you're looking for.

Overall I think this is what you're looking for: $.fn. SexyImageHover = function() { var p = this, // parent I = this. Children('img'); // image i.

Load(function(){ // get image and parent width/height info var pw = p.width(), ph = p.height(), w = i.width(), h = i.height(); // check if the image is actually larger than the parent if (w > pw || h > ph) { var w_offset = w - pw, h_offset = h - ph; // center the image in the view by default i. Css({ 'margin-top':(h_offset / 2) * -1, 'margin-left':(w_offset / 2) * -1 }); p. Mousemove(function(e){ var new_x = 0 - w_offset * e.

OffsetX / w, new_y = 0 - h_offset * e. OffsetY / h; i. Css({ 'margin-top':new_y, 'margin-left':new_x }); }); } }); } You can test it here.

Notable changes: new_x and new_y should be divided by the images height/width, not the container's height/width, which is wider. This is already a jQuery object in a $.fn. Plugin function, no need to wrap it.

I and p were also jQuery objects, no need to keep wrapping them no need to bind mousemove on mouseenter (which rebinds) the mousemove will only occur when you're inside anyway.

Aside from the slowly coming to the stop, it isn't exactly like the example. I can't quit describe it but something is off. – Glenn Nelson Nov 12 '10 at 2:54 thanks Nick, that fixed it :) – Maikel Nov 12 '10 at 2:56 1 @Glenn - it doesn't have the easing, it's definitely a more simplified version, I was just showing how to fix the current code :) – Nick Craver?

Nov 12 '10 at 2:58 @Maikel - welcome! – Nick Craver? Nov 12 '10 at 2:58 it is more complicated to add easing?

– Maikel Nov 12 '10 at 3:02.

Nick Craver beat me to an answer by about 10 minutes, but this is my code for this, using background-image to position the image instead of an actual image. Var img = $('#outer'), imgWidth = 1600, imgHeight = 1200, eleWidth = img.width(), eleHeight = img.height(), offsetX = img.offset(). Left, offsetY = img.offset().

Top, moveRatioX = imgWidth / eleWidth - 1, moveRatioY = imgHeight / eleHeight - 1; img. Mousemove(function(e){ var x = imgWidth - ((e. PageX - offsetX) * moveRatioX), y = imgHeight - ((e.

PageY - offsetY) * moveRatioY); this.style. BackgroundPosition = x + 'px ' + y + 'px'; }); The huge amount of variables are there because the mousemove event handler has to be as efficient as possible. It's slightly more restrictive, because you need to know the dimensions, but I think the code can be easily altered to work with imgs for which the size can be calculated easily.

A simple demo of this: http://www.jsfiddle.net/yijiang/fq2te/1.

Should note this has a few restrictions over the original though, for example you need to know the dimensions. That being said, it's a good alternative for many situations, +1. – Nick Craver?

Nov 12 '10 at 3:17.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.