Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
[Minimal Series] Presskit Download page
.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
/*
* 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();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.