Hover and show image at mouse location

Help
1

Hello!
I am trying to make links (say on the homepage) where when you hover over them a the preview image appears at the x / y-axis of the mouse. Something like this but not with Vue. I don’t know how to use Vue. Is this achievable with Jekyll? Or Liquid? I am using JQuery to try to achieve this (but I am no JS wiz)

I’ve gotten as far as making the image appear, but it is not specific to the post’s preview. It just shows ALL the post previews at once.

  $(".project-link").mouseenter(function(){
    $(".projectPreview").css('display', 'inherit')
  } ).mouseleave( function(){
    $(".projectPreview").css('display', 'none')
  });

my HTML:

01%20PM
Screen Shot 2019-02-18 at 6.34.01 PM.png954×532 51.7 KB

If there are any solutions to this using Liquid I’m open to that, anything is helpful! Ive done a lot of researching online but its oddly hard to Google…

Any advice is helpful, thank you!

2

There’s nothing specific in Jekyll that helps with link previews, although there may be Jekyll themes that provide support.

You could achieve much of the effect using just CSS. For example:

https://jsfiddle.net/ke1ojtnh/2/

The bug in your jQuery is that you aren’t restricting the select when setting CSS, so all the images are shown/hidden. To restrict the selector to just the event-element, add this as the selector context. I.e.:

  $(".projectPreview", this).css(...)
1 Like