Hover and show image at mouse location

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.

    $(".projectPreview").css('display', 'inherit')
  } ).mouseleave( function(){
    $(".projectPreview").css('display', 'none')

my HTML:

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!

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:


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