A LIVE link preview window for links on hover over using Jquery and CSS3
For one of my projects, I set out to find a way to display a LIVE preview for links that would display when you hover over the link. It's a novel way to show the user what they're linking to prior to clicking on the link and also provides a little bit of a wow factor. It eliminates the need to create screenshots and you can depend on the view to always be up-to-date since it's a live version. By simply adding a target class to the link or DOM element you want, you can immediately have a up-to-date preview window.
Here are several examples below:
- Hover over this link, view a preview from Bing.com
- Another Live Example, viewing CNN.com
- An example of data-position to the left for this link (500px.com)
- Lastly, an example of the "data-trigger" click option. Click on this link to view a preview instead of a hover.
How it works
When a user hovers over the targeted element, the code looks for a href attribute (what you normally would have in a link). The code then adds a dialog window to the DOM body which contains an iframe window referencing the intended href target. The size of the iframe window is scaled down to the containing dialog window container using CSS3 transform properties so that the entire visible width fits into the dialog window. This dialog appears to the left or right of the targeted element using absolute positioning. When a user hovers off the targeted element, the dialog window is removed completely from the DOM body.
Because of the use of CSS3 properties and an iframe window, be aware of certain limitations:
Certain sites may have set their X-FRAME-OPTIONS header policy to SAMEORGIN or DENY. This is specifically to prevent other sites from iframing their site for obvious reasons. If that is the case, this plugin will not work, and the best is to respect their decision. See example below:
Another limation is this method uses the CSS3 3D Transform scale property which will work in most modern browsers (i.e. Firefox, Chrome, Safari) but not fully supported on IE9. Thankfully IE10 does support the transform properties and will work. You may want to use modernizr to test for compatibility prior to initializing. See example below:
This is what cnn.com may look like (if you are not using IE right now)
I've created a simple JQuery plugin that you can use on your site. You can find the code, related files, and setup instructions on my JQuery-live-preview project on Github here:
Questions or improvements? Let me know!