How to make info text appear and follow the cursor when hovering over image?

Question

For my portfolio website, I want to include info text that becomes visible when hovering over the according image and I want the text to follow along the cursor.

I'm by no means a coding expert, so I tried to achieve the effect by replacing the default cursor with an image of the text on white background via css and the cursor-property. However, this left me with weird gray edged around the image that the image originally doesn't have.

So I figured that this was a sloppy approach anyway and that I should rather try solving it via javascript... which left me with the following code:

 $(document).bind('mousemove', function(e){ $('#tail').css({ left: e.clientX + 20, top: e.clientY + document.body.scrollTop }); });

 #tail { position: absolute; background-color: #ffffff; padding: 5px; opacity: 0; } #tail p { margin: 0px; }.project-01:hover > #tail { opacity: 100%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="project-01"> <a href="project-site-01.html"> <img src="images/project-cover-01.png" alt="Project description"> </a> <div id="tail"> <p>Project description</p> </div> </div>

I am now left with text that appears when hovering over the image and it follows the cursor properly, even if the cursor position changes due to scrolling (which it didn't do properly at first, which is why I added the 'document.body.scrollTop'). The only problem: The info text is way to far away from the cursor. I tried adjusting the offset, adding '- 900' after 'document.body.scrollTop' but that only makes it look right with my specific browser height – if I switch to a smaller or bigger screen, the '- 900' of course doesn't fit anymore.

Is there anyone who can explain what I'm doing wrong on a dummy level or even better – tell me how to fix the problem? I've been trying to get that hover text effect working for literally the past two days. HELP!

PS: You can see the effect I want to create on https://playgroundparis.com

Answer 1

I hope this can help you!

Edit: Technically this is a duplicated . I realized the problem with scrolling that you talking about. I've found a solution in this post and I readaptated it for your specific case.

 var mouseX = 0, mouseY = 0, limitX, limitY, containerWidth; window.onload = function(e) { var containerObjStyle = window.getComputedStyle(document.querySelectorAll(".project-01")[0]); containerWidth = parseFloat(containerObjStyle.width).toFixed(0); containerHeight = parseFloat(containerObjStyle.height).toFixed(0); var follower = document.querySelector('#tail'); var xp = 0, yp = 0; limitX = containerWidth; limitY = containerHeight; var loop = setInterval(function(){ //Change the value 5 in both axis to set the distance between cursor and text. xp = (mouseX == limitX)? limitX: mouseX + 5; xp = (xp < 0)? 0: xp; yp = (mouseY == limitY)? limitY: mouseY + 5; yp = (yp < 0)? 0: yp; follower.style.left = xp + 'px'; follower.style.top = yp + 'px'; }, 15); window.onresize = function(e) { limitX = parseFloat(window.getComputedStyle(document.querySelectorAll(".project-01")[0]).width).toFixed(0); } document.onmousemove = function(e) { mouseX = Math.min(e.pageX, limitX); mouseY = Math.min(e.pageY, limitY); } }; //Change the 100 value to set the fade time (ms). $(".project-01").hover(function () { $(this).find('#tail').fadeIn(100); }, function () { $(this).find('#tail').fadeOut(100); });

 #tail { position: absolute; background-color: #ffffff; padding: 5px; overflow: hidden; } #debug { position: absolute; right: 0; top: 100px; width: 100px; height:100px; background-color: red; color: black; } #tail p { margin: 0px; }.project-01 { width: 300px; overflow: hidden; }.project-01 img { height: 100%; width: 100%; }.project-01 a { height: 100%; width: 100%; display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="project-01"> <a href="project-site-01.html"> <img src="https://picsum.photos/200/300" alt="Project description"> </a> <div id="tail"> <p>Project descriptions</p> </div> </div>

Answer 2

You can use the below code's

 .description { display: none; position: absolute; z-index: 2000;important: color; black: padding; 15px: margin-left; 32px: margin-top; -200px: top; auto: height; auto: width; 500px. }:image { height; 200px: width; 200px. }:my-image.hover +:description { display; block: position; absolute: background-color; black: color; white. }:description:hover { display; block: background-color; black: color; white; }

 <div class="project-01"> <a href="project-site-01.html" class="my-image"> <img src="https://homepages.cae.wisc.edu/~ece533/images/monarch.png" alt="Project description" class="image"> </a> <div id="tail" class="description"> Butterflies are insects in the macrolepidopteran clade Rhopalocera from the order Lepidoptera, which also includes moths. Adult butterflies have large, often brightly coloured wings, and conspicuous, fluttering flight. </div> </div>

Answer 3

I hope this helps i recenty made one myselff for my website a few days ago
No info cursor:

 .info:hover.tooltip { color: red; visibility: visible; opacity: 1; transition: opacity 1s }.tooltip { visibility: hidden; opacity: 0; transition: opacity 1s } }.tootip:hover { visibility: visible }

 <span class="info"><img src="https://google.com/favicon.ico">Hover Me</img> <span class="tooltip">Welcome</span></a></span>

With info cursor:

 .info:hover.tooltip { color: red; visibility: visible; opacity: 1; transition: opacity 1s }.tooltip { visibility: hidden; opacity: 0; transition: opacity 1s } }.tootip:hover { visibility: visible }.info { cursor: help }

 <span class="info"><img src="https://google.com/favicon.ico">Hover Me</img> <span class="tooltip">Welcome</span></a></span>