Hover image and show it next to the cursor

Question

I would like to know if there is a way to show the same image as you are hovering, with a different size, next to the cursor? And on mouseout, it should disappear.

Yes there's a way. It's not really hard either. What have you tried so far? So you have any markup already? Or were you just planning to ask if it was possible, cause it is. — OptimusCrime
– OptimusCrime, Commented Feb 28, 2012 at 8:48
Hope the community will not be angry with me, for answering this question. — Starx
– Starx, Commented Feb 28, 2012 at 8:57

elclanrs · Accepted Answer · 2012-02-28 09:06:33Z

5

Something like this will work. Adjust to your needs. http://jsfiddle.net/elclanrs/jF27b/

var $img = $('img');
$img.hide();
$('div').mousemove(function(e) {
    $img.stop(1, 1).fadeIn();
    $('img').offset({
        top: e.pageY - $img.outerHeight(),
        left: e.pageX - $img.outerWidth()
    });
}).mouseleave(function() {
    $img.fadeOut();
});

edited Feb 28, 2012 at 9:06

answered Feb 28, 2012 at 9:00

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Adam Merrifield Over a year ago

Change mouseout to mouseleave to get rid of mild flickering if hovering over the image (moving cursor up and left)

Adam Merrifield Over a year ago

Yes, mouseout is fired when the mouse is out of the element, which at the time of hovering over img, it is out of div. mouseleave on the other hand is when the mouse leaves the element and takes child elements into consideration. So since img is inside of div the event isn't fired.

Adam Merrifield · Accepted Answer · 2012-02-28 08:57:53Z

0

I believe this is what you want.

http://jsfiddle.net/BaDCe/

answered Feb 28, 2012 at 8:57

Adam Merrifield

10.4k4 gold badges46 silver badges60 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

Here is a simple way you can do it.

Markup Structure

<li class="thumb">
    <img class="small" src="http://stackoverflow.com/" />
    <img class="large" src="someimage.jpg" />
</li>

jQuery Snippet

$(".thumb").mouseover(function() {    
   $(this).children(".large").show();
}).mouseout(function() {
   $(this).children(".large").hide();
});

^{P.S: I am not going to test this code to work, because I completely agree with @OptimusCrime}

Demo

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 28, 2012 at 8:55

Starx

79.3k50 gold badges187 silver badges266 bronze badges

1 Comment

Purag Over a year ago

I have to be honest, it's noble that you promote that cause, but it's better not to provide an answer than to provide one that's untested and potentially worthless.

Collectives™ on Stack Overflow

Hover image and show it next to the cursor

3 Answers 3

2 Comments

Comments

Demo

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related