[Minimal Series] Presskit Download page

index.pug

.mouseOver_text
  h1
    a.screenshot(href='#', rel='https://dvdz.design/random/imgs/img1.jpg') Reddish
  h1
    a.screenshot(href='#', rel='https://dvdz.design/random/imgs/img2.jpg') Revive
  h1
    a.screenshot(href='#', rel='https://dvdz.design/random/imgs/img3.jpg') True Colors
  h1
    a.screenshot(href='#', rel='https://dvdz.design/random/imgs/img4.jpg') Fade to Stay
  h1
    a.screenshot(href='#', rel='https://dvdz.design/random/imgs/img5.jpg') Mirror
  h1
    a.screenshot(href='#', rel='https://dvdz.design/random/imgs/img6.jpg') Newspaperwood

minimal-series-presskit-download-page.markdown

[Minimal Series] Presskit Download page

A Pen by Daan on CodePen.

License.

script.js

/*
 * Url preview script 
 * powered by jQuery (http://www.jquery.com)
 * 
 * written by Alen Grakalic (http://cssglobe.com)
 * edited by Daan van der Zwaag (https://dvdz.design)
 *
 */

function previewImages() {
  /* CONFIG */

  xOffset = 200;
  yOffset = 80;

  // these 2 variable determine popup's distance from the cursor
  // you might want to adjust to get the right result

  /* END CONFIG */

  $("a.screenshot").hover(function(e) {

      var $this = $(this); // caching $(this)
    
      $this.data('initialText', $this.text());
      $this.text("Download").delay(1200); // Set text
      
      $("body").append("<div id='previewImage'><img src='" + this.rel + "' alt='rens preview image' />" + "</div>");

      $("#previewImage")
        .css("top", (e.pageY - xOffset) + "px")
        .css("left", (e.pageX + yOffset) + "px")
        .fadeIn("fast");
    },
    function() {

      var $this = $(this); // caching $(this)
      $this.text($this.data('initialText'));

      $("#previewImage").remove();
    });

  $("a.screenshot").mousemove(function(e) {
    
    $("#previewImage")
      .css("top", (e.pageY - xOffset) + "px")
      .css("left", (e.pageX + yOffset) + "px");
    
  });
};

  previewImages();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

style.scss

body {
  box-sizing: border-box;
  background-color: white;
  min-height: 100%;
}

.mouseOver_text {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  z-index: 2;
  transform: translateY(-50%);
  top: 50%;
  text-align: center;
  img {
    max-width: 100%;
    max-height: 100%;
    user-select: none;
    margin: 0 auto;
  }
  h1 {
    font-family: "Futura";
    margin: 0.5em;
    letter-spacing: 2px;
    transition: all 300ms ease-out;
    a {
      text-decoration: none;
      color: currentColor;
      display: block;
    }
    &:hover {
      letter-spacing: 4px;
    }
  }
}

#previewImage {
  position: absolute;
  display: none;
  color: #fff;
  z-index: 2;
  img {
    width: 35vw;
  }
}