This tutorial will guide you through the process of creating a Javascript Link Preview On Hover effect. This interactive feature enhances user experience by displaying a small preview card with relevant information when a user hovers their mouse over a link. This is particularly useful for providing context about the linked content before the user clicks, improving engagement and navigation.
Step 1: Include Header Assets
First, include the necessary CSS assets in the <head> section of your HTML document. This example uses Bootstrap for basic styling.
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
Step 2: Create the HTML Structure
Next, create the core HTML structure for your webpage, including the links you want to apply the preview to and the card element that will serve as the preview.
<main>
<h1>Link Preview</h1>
<p>
Once upon a time there were two
<a href="https://www.codepen.io/wildtype" target="_blank" onmouseover="showLinkPreview()" onmouseleave="hideLinkPreview()" class="link-with-preview" data-image="https://images.unsplash.com/photo-1587042538225-e30d1247eddd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" data-title="Mountain Friends 🏔" data-text="Introduced by their tectonic plate neighbors when they were very young.">
mountain friends
</a>
with a
<a href="https://www.codepen.io/wildtype" target="_blank" onmouseover="showLinkPreview()" onmouseleave="hideLinkPreview()" class="link-with-preview" data-image="https://images.unsplash.com/photo-1506355683710-bd071c0a5828?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" data-title="Raging River 🌊" data-text="With the exception that this one is not very exciting.">raging river
</a>
between. That's the end of
<a href="https://www.codepen.io/wildtype" target="_blank" onmouseover="showLinkPreview()" onmouseleave="hideLinkPreview()" class="link-with-preview" data-image="https://images.unsplash.com/photo-1516202180772-d888b16cf6dd?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" data-title="Our Story" data-text="Looking at all these pictures makes me really not want to be inside right now.">our story</a>.
</p>
<div class="card">
<img src="" class="card-img-top" />
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text"></p>
</div>
</div>
</main>
<script src="./script.js"></script>
Step 3: Add CSS Styling
Now, let’s style the page and, most importantly, the link preview card using CSS. This will define the appearance and positioning of the preview.
:root {
font-size: 16px;
}
body {
font-size: 24px;
font-family: sans-serif;
}
main {
width: 40rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
h1 {
font-weight: 600;
line-height: 1.5;
}
a {
color: rgb(255, 144, 85);
}
a:hover {
text-decoration: none;
color: rgb(255, 180, 89);
}
.card {
width: 15rem;
display: none;
font-size: 1rem;
color: black;
position: absolute;
z-index: 100;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
}
.link-with-preview {
position: relative;
}
.card img {
width: 15rem;
}
.card-title {
font-size: 1.25rem;
}
@media (max-width: 600px) {
:root {
font-size: 10px;
}
h1 {
font-size: 4rem;
}
}
Step 4: Implement the JavaScript Logic
This is where the magic happens. We’ll add JavaScript to handle the hover event on the links, fetch the preview data, and display the preview card.
const card = document.querySelector(".card");
const hideLinkPreview = () => card.style.display = "none";
const showLinkPreview = e => {
const image = e.currentTarget.getAttribute("data-image");
card.querySelector("img").setAttribute("src", image);
const title = e.currentTarget.getAttribute("data-title");
card.querySelector("h5").textContent = title;
const text = e.currentTarget.getAttribute("data-text");
card.querySelector("p").textContent = text;
e.currentTarget.appendChild(card);
return card.style.display = "inline-block";
};
document.querySelectorAll(".link-with-preview").forEach(el => {
el.addEventListener("mouseover", showLinkPreview);
el.addEventListener("mouseleave", hideLinkPreview);
});
Step 5: Add Footer Assets
Optionally, include any JavaScript libraries or custom scripts just before the closing <body> tag for optimal page loading.
You have now successfully implemented a Javascript Link Preview On Hover effect. This engaging feature enhances user interaction by offering a quick glimpse of the linked content, leading to a more enjoyable browsing experience.
