How to code a link that shows the content of the page when hovering over the link?

Hi,

I’m new to coding and am learning from scratch to make my own web portfolio.

Elias Ruiz’s portfolio has links that when you hover over them you can see the contents of the page in a small box that follows the cursor. I would like some help to know how to code this, please.

I have linked his portfolio below. Thanks for the help!!!

eliasruiz.com

Hi,

I am struggling to find out how to code a pop-up of the page appear of a link on my portfolio when I hover over the link with my cursor. I would also love it to follow my cursor as it hovers over the link.

Elias Ruiz’s portfolio has links that when you hover over them you can see the contents of the page in a small box that follows the cursor. I would like some help to know how to code this, please.

I have linked his portfolio below. Thanks for the help!!!

Portfolio homepage

You can take a screenshot of each site, then have them as an <img> for each portfolio piece that you show on hover. You would need to use JS to make it follow the cursor.

Or

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

You can use an iframe instead of an image; it will actually load the site though, so it’s not a very efficient way of doing things.

Bear in mind this functionality is completely broken on the platform most people will view it on (mobile) [edit, sp]

1 Like

If you look for tutorials on how to create “tooltips” you’ll probably find what you’re looking for. It sounds like the main distinction here is that it shows an image instead of text.

1 Like

Also, anyone using a keyboard won’t be able to see these images, so accessibility is not great. I know it seems like a cool effect but it does exclude a lot of people. If you want everyone to see your image previews then you need to display the image on the page, or I suppose you could use a toggle button to show/hide it on the page if you didn’t want it showing initially.

Personally, I think this effect is a slightly annoying because:

  • The image covers up text you are trying to read.
  • The image has a caption at the bottom with hash tags but you can’t copy/paste them because you can’t move your mouse over the image.
  • I think it’s a little “cheesy”. Follow the mouse effects were popular some time ago but I think they have run their course for the most part.

@ibrahimludhi43, you don’t have to agree with anything I have said above. If you want to figure out how to do this then go for it, I’m sure you’ll learn some new things. But if you are putting together a professional portfolio for potential employers then I’m not sure you will gain much from this and it may potentially hinder you.

3 Likes

Thank you! I shall give it a go.

That makes complete sense thank you! Accessibility is a definite issue and should be addressed too. I hope to learn as much as I can. Your points on the cons of the affect make sense too. I am going to give it a go even if it’s just for learning some more techniques at this point. :slight_smile:

Would you think having a short video of maybe scrolling through the page or playing a clip of a video or animation that is on the next page would be a better idea than just a screenshot? That way I wouldn’t have to use iframe and it would load it quicker maybe.

The js to follow the cursor is gonna be a new one for me :smiley:

You can use a gif just like the site you linked to does.

But as others have said I too find the hover effect a bit questionable and on narrow viewports, it is pretty much completely broken (the position of the image is borked).

Although there are some good examples of page previews, like Wikipedia page previews.

1 Like

Thanks for the suggestion! :slight_smile:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.