URL preview

by Julien Roche

HTML

<section>
  <a class="url" href="https://www.example.com">Example.com web site</a>
  <div class="url-preview">
    <header class="url-preview__header">URL: <span class="url-preview__header__link">https://www.example.com</span></header>
    <iframe
      class="url-preview__content"
      src="https://www.example.com"
      seamless="seamless"
      scrolling="no"
      frameborder="0"
      allowtransparency="true"
    ></iframe>
  </div>
</section>

CSS

.url {
  anchor-name: --anchor-el;
}

.url:hover + .url-preview {
  display: flex;
  height: 25vh;
  opacity: 1;
  visibility: visible;
  width: 50vw;
  scale: 1;
  
}

.url-preview {
  border: 1px solid black;
  border-radius: 0.5rem;
  display: none;
  top: anchor(bottom);
  left: anchor(right);
  pointer-events: none;
  position-anchor: --anchor-el;
  position: absolute;
  
  height: 0;
  opacity: 0;
  scale: 0;
  visibility: hidden;
  width: 0;
  transition: all 0.25s;
  transition-behavior: allow-discrete;
  
  & .url-preview__header {
    left: 0px;
    overflow: hidden;
    position: absolute;
    right: 0px;
    text-overflow: ellipsis;
    top: 0px;
    white-space: nowrap;
    z-index:10;
    
    & .url-preview__header__link {
      text-decoration: underline;
    }
  }
  
  & .url-preview__content {
    border: none;
    flex: 1 1 auto;
    margin: 0.5rem;
    overflow: hidden;
    transform: scale(0.75);
    transform-origin: 0 0;
  }
}