Skip to content

Instantly share code, notes, and snippets.

Created July 27, 2016 03:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CodeMyUI/33d5849567ba9d309415c57cc1db9c7b to your computer and use it in GitHub Desktop.
Save CodeMyUI/33d5849567ba9d309415c57cc1db9c7b to your computer and use it in GitHub Desktop.
Safari like URL Full page preview
.text="Hover over the URL to open a full-page preview of the link just like it does, when you do a triple click on a link in Safari."

Safari like URL Full page preview

A pen that demonstrates the behaviour exhibited when you do a triple-click on a link in Safari. It generally opens up a preview pop up that shows the entire page.

A Pen by Dinesh Balaji on CodePen.


var wrapper = document.querySelector('.wrapper');
var link = document.querySelector('.link');
var iframe_wrapper = document.querySelector('.iframe_wrapper')
var iframe = document.querySelector('.iframe');
var shown = false;
link.addEventListener('mouseenter', (event) => {
if (!shown) {
var src =;
iframe.src = src;
iframe_wrapper.classList.add('show'); = + 'px'; = + 'px';
shown = true;
wrapper.addEventListener('click', (event) => {
if (shown) {
iframe.src = '';
iframe_wrapper.classList.remove('show'); = '0px'; = '0px';
shown = false;
@import '';
html, body {
width: 100%;
height: 100%;
font-family: 'Lato', sans-serif;
background: linear-gradient(90deg, rgba(82,255,191,1) 0%, rgba(64,231,212,1) 100%);
.wrapper {
width: 100%;
height: 100%;
.text {
width: 300px;
text-align: Center;
margin: 10px auto;
background: white;
border: 5px solid rgba(0, 0, 0, 0.5);
padding: 10px;
.link {
position: absolute;
top: 100px;
left: 50%;
transform: translateX(-50%);
text-decoration: underline;
color: white;
font-size: 20px;
.iframe_wrapper {
width: 80vw;
height: 50vh;
position: absolute;
left: 0px;
top: 0px;
border: 1px solid #4a4a4a;
transform: translate(-100%, -100%);
box-shadow: 0px 0px 10px 0px #4b4b4b;
visibility: hidden;
transition: visibility .3s linear;
background: #4b4b4b;
&.show {
transform: translate(-50%, 35px) !important;
visibility: visible;
&:before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #4a4a4a;
transform: translate(-50%, -100%);
iframe {
width: 100%;
height: 100%;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment