Tutorials

Display Image Link Preview on Hover

image-link-preview-on-hover
IN this post you are going to see how you can show a live image link preview of the link you are hovering on. This is a very useful plugin especially for a site that links a lot. All of this is done using HTML, CSS and some javascript. Apart from other solutions that you see on the web this trick doesn’t require you to manually add the image links whereas these image previews are dynamically fetched from the link. Three different ways of implementation are discussed in this post with each offering it’s own advantages. Without further a do lets get started.

Similar : Add beautiful tooltips to your site with HTML and CSS only

Scripts and Styles

Add the following code below above </head> in your website.

Now that you have added all the required files (It’s all that you need!! ) it’s time for the mark up.

HTML Markup

The mark up is straight forward. All you have to do is wrap up the links in a paragraph or div with any of the following three ids:

  1. id=”p1″ : Link previews are fetched as soon as page is loaded therefore previews are shown instantly on hover. Optimal if number of links are less.
  2. id=”p2″ : In this case the link previews are fetched when the user hovers the parent region(the region within that id).
  3. id=”p3″ : This is slower than the other two but saves bandwidth. Link Previews are loaded only when user hovers the link.

DEMO & HTML Markup

Switch to the HTML tab to see the HTML markup. See a live image link preview of it in the results pane.


NOTE: This trick may not work with sites like Google whose images can’t be fetched.

If you have any questions or requires any help please leave a comment and I will help you as fast as possible.