How to show live preview in a small popup of linked page on mouse over on link?

by

You can use an iframe to display a preview of the page on mouseover:

.box{
    display: none;
    width: 100%;
}

a:hover + .box,.box:hover{
    display: block;
    position: relative;
    z-index: 100;
}
This live preview for <a href="https://en.wikipedia.org/">Wikipedia</a>
  <div class="box">
    <iframe src="https://en.wikipedia.org/" width = "500px" height = "500px">
    </iframe>
  </div> 
remains open on mouseover.

Here’s an example with multiple live previews:

.box{
    display: none;
    width: 100%;
}

a:hover + .box,.box:hover{
    display: block;
    position: relative;
    z-index: 100;
}
Live previews for <a href="https://en.wikipedia.org/">Wikipedia</a>
  <div class="box">
     <iframe src="https://en.wikipedia.org/" width = "500px" height = "500px">
     </iframe>
  </div> 
and <a href="https://www.jquery.com/">JQuery</a>
  <div class="box">
     <iframe src="https://www.jquery.com/" width = "500px" height = "500px">
     </iframe>
  </div> 
will appear when these links are moused over.

More Related Contents:

  1. How do I achieve equal height divs (positioned side by side) with HTML / CSS ?
  2. How to add anything in through jquery/javascript?
  3. How to convert unordered list into nicely styled dropdown using jquery?
  4. I want to show list items as 2 or more columns (dynamic alignment)
  5. Can I save input from form to .txt in HTML, using JAVASCRIPT/jQuery, and then use it?
  6. How to display an chage photo option on mouse hover similar to linkedin using Javascript? [closed]
  7. Input type="text" with select functionality after clicking on Input type="text"
  8. How to force browser to show image 3 inches wide?
  9. Reloading a single div in an html page [closed]
  10. How to invoke animation when redirection in jsf?
  11. fixing slider on my website [closed]
  12. Only detect click event on pseudo-element
  13. Can I use HTML tags in the options for select elements? [duplicate]
  14. Select all elements that have a specific CSS, using jQuery
  15. How can I disable a browser or element scrollbar, but still allow scrolling with wheel or arrow keys?
  16. Hide scrollbar while still being able to scroll with mouse/keyboard [duplicate]
  17. Border Radius for IE8
  18. jQuery Drag/Resize with CSS Transform Scale
  19. Creating a select box with a search option
  20. Trees in Twitter Bootstrap [closed]
  21. Fill available spaces between labels with dots or hyphens
  22. How to resize Twitter Bootstrap modal dynamically based on the content
  23. Detect browser wrapped lines via javascript
  24. Extracting text from a contentEditable div
  25. How can I dynamically highlight strings on a web page?
  26. Rotate div text after clicking on button using jquery and css
  27. How do I find which JavaScript is changing an element’s style?
  28. How to Bootstrap navbar static to fixed on scroll?
  29. How to use pagination on HTML tables?
  30. How can I reorder elements with JavaScript?

Leave a Comment