Mouse hover moving image position

Question

I am trying to move an image when my mouse is over it. Here's an exemple . When moving hover pictures, the text is smoothly following your mouse and this is what I'm looking for.

Do you have any idea ?

The problem with what I tried is that the image keeps moving when I get out of the violet box. (I would prefer to avoid having to create a box and recognize when I am over the image).

 $("#containerScaled").on('mousemove', '.box', function (e) { $("#followC").css("top", e.clientY) .css("left", e.clientX); }); 

 <style> #containerScaled, #followC { transition: all 0.9s ease-out; transform-origin: center; transform: scale(1, 1); } .box { height:50px; width:50px; left: 500px; top: 50px; background-color: blueviolet; position: absolute; } .mouseFollow { position: fixed; width:70px; height:20px; font-size:12px; pointer-events:none; } </style> 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="containerScaled" class="container"> <div class="box">test</div> </div> <div id="followC" class="mouseFollow"><img src=" image "/></div> 

Answer 1

I think you should begin with altering your position based on where your mose is positioned inside your rectangel like so:

  if (e.clientX > width/2){
    addX = 20;
  }
  if(e.clientX < width/2){
    addX = -20;
  }
  if(e.clientY > height/2){
    addY = 20;
  }
  if(e.clientY < height/2){
    addY = -20;
  }

This is the first step, that actually makes something "follow" your mouse.

I think you could do some optimization, so that the animation is more crispy, but basically thats the way to go.

I also added

    $("#containerScaled").on('mouseleave', '.box', function(e) {

      $("#followC").css("top", "50%").css("left", "50%");

    });

so that your element will get back to its original position once you leave the :hover area

Because of this I also made you hover area transparent, any lay over the moving element, so that when you hover over the moving element, you wont leave the hover area, and trigger mouseleave

.box{
  background-color: transparent;
}

.boxcolored{
  position: absolute;
  height: 100px;
  width: 100px;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-color: green;
}

 $("#containerScaled").on('mousemove', '.box', function(e) { var left = parseFloat($(".box").css("left")); var right = parseFloat($(".box").css("top")); var width = parseFloat($(".box").css("widht")); var height = parseFloat($(".box").css("height")); var addX = 0; var addY = 0; if (e.clientX > width/2){ addX = 20; } if(e.clientX < width/2){ addX = -20; } if(e.clientY > height/2){ addY = 20; } if(e.clientY < height/2){ addY = -20; } $("#followC").css("top", e.clientY + addY) .css("left", e.clientX + addX); }); $("#containerScaled").on('mouseleave', '.box', function(e) { $("#followC").css("top", "50%").css("left", "50%"); }); 

 #containerScaled { position: absolute; top: 0; left: 0; width: 200px; height: 200px; background-color: red; } #followC { transition: all 0.9s ease-out; transform-origin: center; } .box { position: absolute; height: 100px; width: 100px; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); background-color: transparent; } .boxcolored{ position: absolute; height: 100px; width: 100px; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); background-color: green; } .mouseFollow { position: relative; height: 20px; width: 75px; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); background-color: yellow; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="containerScaled" class="container"> <div class="boxcolored"></div> <div id="followC" class="mouseFollow">HALLO</div> <div class="box">mouse me</div> </div> 

Answer 2

The box outlined in a red dashed line is the hover area. The yellow box is the visual area which is the approximation of the limits to which the letters can move within.

There is a lag and an offset. The lag is due to transition: 0.9s and the offset is left and top . The lag can be decreased but at the cost of the smooth movement, There are four letters at varying transition times for comparison. Notice that they all stop at the same position (when the mouse is no longer moving within the dashed box), it just that the slower the transition the more movement occurs after the mouse has left the dashed box.

The offset is tougher since there is only two positions that will work: x: right or left and y: top or bottom. If keeping the letters within a box is a concern, then keep the hover area border and background to none and show the offset (visual area) instead.

Note: Do not review this demo in compact mode, view it in full page mode (normal dimensions)

 $(".target").on('mousemove', function(e) { $(".text").css({ "top": e.clientY, "left": e.clientX }); }); 

 main { position:relative; font: 400 16px/1.2 Arial; } .zone { position: absolute; z-index: 1; height: 120px; width: 110px; margin: 90px 0 0 90px; background: gold; color:white; text-align:right; } .target { position: absolute; z-index: 2; height: 100px; width: 100px; margin: 75px; outline: 3px dashed red; color:red } .text { position: absolute; z-index: 3; top: 90px; left: 90px; font-size: 32px; color:black } .A { transition: all 0.9s ease-out; } .B { transition: all 0.6s ease-out; } .C { transition: all 0.3s ease-out; } 

 <main> <section class="target">Hover Area</section> <aside class="text A">A</aside> <aside class="text B">B</aside> <aside class="text C">C</aside> <aside class="text D">D</aside> <section class='zone'><b>Visual Area</b></section> </main> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>