Hoverlinks! (link preview popups, like wikipedia)

Link to article: Hoverlinks! (link preview popups, like wikipedia).

.croqstyle__documentation :is(h1, h2, h3) {
  font-family: Inter, sans-serif;
  font-weight: bold;
}
.croqstyle__documentation h1 ~ h1 { margin-top: 6rem }
.croqstyle__documentation h1 ~ h2 { margin-top: 3rem }

@import url(https://scp-wiki.wdfiles.com/local--code/component%3Ahoverlinks/1);

--src: url(https://scp-sandbox-3.wdfiles.com/local--files/testant/Berrymanpreview.png)

--hoverlink-bg-color: #f9f3f4; color: #762d3a;

--src: url(https://scp-wiki.wdfiles.com/local--files/search%3Acrom/crom.png); filter: invert(22%) sepia(11%) saturate(4261%) hue-rotate(304deg) brightness(93%) contrast(90%);

```
grid-area: generator
```
```
--src: url({hoverImage})
```

--src: url(https://scp-wiki.wdfiles.com/local--files/end-of-death-hub/1.png)

:scp-wiki:component:croqstyle [info]

```
croqstyle__documentation
```
```
hoverlink
```
```
hoverlink-card
```
```
hoverlink-title
```
```
hoverlink-text
```
```
hoverlink-image
```
```
code
```
```
terminal
```
```
code
```
```
terminal
```
```
code
```
```
terminal
```
```
hoverlink
```
```
hoverlink-card
```
```
hoverlink-title
```
```
hoverlink-text
```
```
hoverlink-image
```
```
cromplug
```
```
hoverlink-card
```
```
hoverlink-card--static
```
```
hoverlink-title
```
```
hoverlink-text
```
```
hoverlink
```
```
hoverlink-image
```
```
hoverlink
```
```
hoverlink-card
```
```
hoverlink-title
```
```
hoverlink-text
```
```
hoverlink-image
```
```
hoverlink
```
```
hoverlink-card
```
```
hoverlink-title
```
```
hoverlink-text
```
```
hoverlink
```
```
hoverlink-card
```
```
hoverlink-title
```
```
hoverlink-text
```
```
hoverlink-image
```
```
hoverlink
```
```
hoverlink-card
```
```
hoverlink-title
```
```
hoverlink-text
```

[[iftags +component]]

[[include :scp-wiki:component:croqstyle]]

[[div class="croqstyle__documentation"]]

[[>]]
[[module Rate]]
[[/>]]

[[module css]]
.croqstyle__documentation :is(h1, h2, h3) {
  font-family: Inter, sans-serif;
  font-weight: bold;
}
.croqstyle__documentation h1 ~ h1 { margin-top: 6rem }
.croqstyle__documentation h1 ~ h2 { margin-top: 3rem }
[[/module]]

+ Hoverlinks!

It's like Wikipedia! Need I say more?

Originally made by [[*user Croquembouche]] for use in [[span class="hoverlink"]][[[scp-9001|]]]^^ⓘ^^[[span class="hoverlink-card"]][[span class="hoverlink-title"]]SCP-9001 — Fractal[[/span]][[span class="hoverlink-text"]]Turns out that you can plug your own articles in components. Who's gonna complain? You?[[/span]][[span class="hoverlink-image" style="--src: url(https://scp-sandbox-3.wdfiles.com/local--files/testant/Berrymanpreview.png)"]]-[[/span]][[/span]][[/span]], Hoverlinks are intended for that thin sliver of use case where you'd love to crosslink an interesting and relevant page in the middle of your story, but you don't want the reader to feel like they're missing out if they haven't read it. By using a Hoverlink you can succinctly summarise the context of that link and keep moving, with less risk of the reader getting distracted and abandoning your article forever.

++ Usage

On any wiki, pop this at the top of your page, **above** any CSS themes:

[[div class="code terminal"]]
**##var(--c-keyword)|[[##**##var(--c-operator)|include## ##var(--c-value)|:scp-wiki:component:hoverlinks##**##var(--c-keyword)|]]##**
[[/div]]

You only need **one** of these, no matter how many Hoverlinks you have on your page.

Then, for each Hoverlink you want on the page, copy the following syntax (or use the generator below), and paste them wherever you want.

[[collapsible show="+ show syntax" hide="- hide syntax"]]

With an image:

[[div class="code terminal"]]
##var(--c-keyword)|[[####var(--c-builtin)|span## ##var(--c-symbol)|class##=##var(--c-string)|@@"hoverlink"@@####var(--c-keyword)|]]####var(--c-keyword)|[[[##**LINK_URL**##var(--c-keyword)||##**LINK_TEXT**##var(--c-keyword)|]]]##@@^^ⓘ^^@@##var(--c-keyword)|[[####var(--c-builtin)|span## ##var(--c-symbol)|class##=##var(--c-string)|@@"hoverlink-card"@@####var(--c-keyword)|]]####var(--c-keyword)|[[####var(--c-builtin)|span## ##var(--c-symbol)|class##=##var(--c-string)|@@"hoverlink-title"@@####var(--c-keyword)|]]##**HOVER_TITLE**##var(--c-keyword)|[[/####var(--c-builtin)|span####var(--c-keyword)|]]####var(--c-keyword)|[[####var(--c-builtin)|span## ##var(--c-symbol)|class##=##var(--c-string)|@@"hoverlink-text"@@####var(--c-keyword)|]]##**HOVER_TEXT**##var(--c-keyword)|[[/####var(--c-builtin)|span####var(--c-keyword)|]]####var(--c-keyword)|[[####var(--c-builtin)|span## ##var(--c-symbol)|class##=##var(--c-string)|@@"hoverlink-image"@@## ##var(--c-symbol)|style##=##var(--c-string)|"@@--@@src: url(**IMAGE_URL**)"####var(--c-keyword)|]]##-##var(--c-keyword)|[[/####var(--c-builtin)|span####var(--c-keyword)|]]####var(--c-keyword)|[[/####var(--c-builtin)|span####var(--c-keyword)|]][[/####var(--c-builtin)|span####var(--c-keyword)|]]##
[[/div]]

Without an image:

[[div class="code terminal"]]
##var(--c-keyword)|[[####var(--c-builtin)|span## ##var(--c-symbol)|class##=##var(--c-string)|@@"hoverlink"@@####var(--c-keyword)|]]####var(--c-keyword)|[[[##**LINK_URL**##var(--c-keyword)||##**LINK_TEXT**##var(--c-keyword)|]]]##@@^^ⓘ^^@@##var(--c-keyword)|[[####var(--c-builtin)|span## ##var(--c-symbol)|class##=##var(--c-string)|@@"hoverlink-card"@@####var(--c-keyword)|]]####var(--c-keyword)|[[####var(--c-builtin)|span## ##var(--c-symbol)|class##=##var(--c-string)|@@"hoverlink-title"@@####var(--c-keyword)|]]##**HOVER_TITLE**##var(--c-keyword)|[[/####var(--c-builtin)|span####var(--c-keyword)|]]####var(--c-keyword)|[[####var(--c-builtin)|span## ##var(--c-symbol)|class##=##var(--c-string)|@@"hoverlink-text"@@####var(--c-keyword)|]]##**HOVER_TEXT**##var(--c-keyword)|[[/####var(--c-builtin)|span####var(--c-keyword)|]]####var(--c-keyword)|[[/####var(--c-builtin)|span####var(--c-keyword)|]][[/####var(--c-builtin)|span####var(--c-keyword)|]]##
[[/div]]

[[/collapsible]]

++ Generator

Use this tool to generate a Hoverlink for a page. All you need is the page URL (it can be the full URL or just the slug, e.g. 'scp-173'). Then, you can ask Crom to fill out the rest of the info for you. The generator has a random SCP written in it already so you can try it out immediately.

The data that Crom uses is actually not really ideal for a Hoverlink - e.g. the preview text is written by the page's author, and is usually more of a blurb than a useful summary, and most pages don't have one anyway. You should use Crom's data as a starting point, and make sure you customise the Hoverlink for your specific need.

//See also: [[span class="hoverlink"]][[[https://crom.avn.sh/docs/crom-for-authors|How to change this data for your article]]]^^ⓘ^^[[span class="hoverlink-card" style="--hoverlink-bg-color: #f9f3f4; color: #762d3a;"]][[span class="hoverlink-title"]]Crom for authors[[/span]][[span class="hoverlink-text"]]As an author, the first impression many people will have of your article will come from Crom. For instance, a Discord embed, a reply on Reddit, embedded search module on your site, or this very website. There are many aspects of how Crom presents your works that you can customize as the author.[[/span]][[span class="hoverlink-image" style="--src: url(https://scp-wiki.wdfiles.com/local--files/search%3Acrom/crom.png); filter: invert(22%) sepia(11%) saturate(4261%) hue-rotate(304deg) brightness(93%) contrast(90%);"]]-[[/span]][[/span]][[/span]]//

[[html]]
<style>
body {
  container-type: inline-size;
}

fieldset {
  padding: 1rem;
  margin-block: 1rem;
}

#previewer { text-align: center }

#generator {
  display: grid;
  grid-template-areas: "link-url link-text" "hover-title hover-image" "hover-text hover-text" "submit submit";
  gap: 1rem;
  grid-template-columns: 1fr 1fr;

  > div {
    display: flex;
    flex-direction: column;
    gap: 0.5ch;
  }

  @container (max-width: 550px) {
    grid-template-areas: "link-url" "link-text" "hover-title" "hover-image" "hover-text" "submit";
    grid-template-columns: auto;
  }
}

button {
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  font-size: inherit;
  font-family: inherit;
}
button[disabled] {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

.cromplug {
  background: #f5e5e8;
  color: #9f3c4e;
  width: fit-content;
  text-align: center;
  border-radius: 0.5rem;
  padding: 0.65rem;
  background-image: url(https://scp-wiki.wdfiles.com/local--files/search%3Acrom/crom.png);
  background-size: cover;
  background-blend-mode: overlay;
  background-position: center 15%;
  margin-left: auto;

  p { margin: 0 }
  :any-link {
    color: #9f3c4e;
    font-weight: bold;
  }
}
#crom-fetch {
  background-color: #f5e5e8;
  border-color: #9f3c4e55;
  color: #9f3c4e;
  padding-block: 0.125rem;
}
#crom-fetch:hover {
  background-color: #ebcbd1;
}
</style>

<body>
<fieldset style="grid-area: generator">
<legend>Generator</legend>
<form id="generator">
  <div style="grid-area: link-url">
    <label for="link-url">Link URL</label>
    <input id="link-url" type="text">
    <div>
      <button id="crom-fetch" type="button">Get details from <b>Crom</b></button>
      <span id="crom-state"></span>
    </div>
  </div>

  <div style="grid-area: link-text">
    <label for="link-text">Link text</label>
    <input id="link-text" type="text" value="click here">
  </div>

  <div style="grid-area: hover-title">
    <label for="hover-title">Hover title</label>
    <input id="hover-title" type="text">
  </div>

  <div style="grid-area: hover-text">
    <label for="hover-text">Hover text</label>
    <textarea id="hover-text" rows="3"></textarea>
    <i style="opacity: 0.5">Make sure to tailor this to your specific needs</i>
  </div>

  <div style="grid-area: hover-image">
    <label for="hover-image">Image URL</label>
    <input id="hover-image" type="text" placeholder="https://...">
  </div>

  <div style="grid-area: submit">
    <div style="display: flex; flex-wrap: wrap; gap: 0.5ch;">
      <button id="generate" type="submit">Generate</button>
      <button id="clear" type="button">Clear</button>
      <button id="undo" type="button" disabled>Undo</button>

      <span class="cromplug">
        Support Crom on
        <a href="https://www.patreon.com/crombird">Patreon!</a>
      </span>
    </div>
  </div>
</form>
</fieldset>

<fieldset>
  <legend>Preview</legend>
  <div>
    <p id="previewer">text text text text text</p>
  </div>
</fieldset>

<fieldset style="display: flex; flex-direction: column; gap: 0.5rem;">
  <legend>Output</legend>
  <textarea readonly id="output" rows="5"></textarea>
  <button id="copy" type="button">Copy to clipboard</button>
</fieldset>

</body>

<script>
const defaultWiki = "http://scp-wiki.wikidot.com/"
const defaultPreviewText = "(no text provided)"

const cromFetch = document.getElementById("crom-fetch")
const generator = document.getElementById("generator")
const clearer = document.getElementById("clear")
const previewer = document.getElementById("previewer")
const output = document.getElementById("output")
const undoButton = document.getElementById("undo")
const cromState = document.getElementById("crom-state")
const linkUrlInput = document.getElementById("link-url")
const linkTextInput = document.getElementById("link-text")
const hoverTitleInput = document.getElementById("hover-title")
const hoverTextInput = document.getElementById("hover-text")
const hoverImageInput = document.getElementById("hover-image")

let undoCache = false
function applyUndoCache() {
  if (!undo) return
  linkUrlInput.value = undoCache.linkUrl
  linkTextInput.value = undoCache.linkText
  hoverTitleInput.value = undoCache.hoverTitle
  hoverTextInput.value = undoCache.hoverText
  hoverImageInput.value = undoCache.hoverImage
  clearUndoCache()
  generatePreview()
}
function saveToUndoCache() {
  undoCache = {
    linkUrl: linkUrlInput.value,
    linkText: linkTextInput.value,
    hoverTitle: hoverTitleInput.value,
    hoverText: hoverTextInput.value,
    hoverImage: hoverImageInput.value,
  }
  undoButton.disabled = false
}
function clearUndoCache() {
  undoCache = false
  undoButton.disabled = true
}

const cromApi = "https://apiv1.crom.avn.sh/graphql"
const cromQuery = `
  query GetHoverlinkInfo($url: URL!) {
    page(
      url: $url
    ) {
      wikidotInfo {
        title
        thumbnailUrl
        source
      }
    } 
  }
`

let cromStateTimer = 0
function setCromState(state) {
  clearTimeout(cromStateTimer)
  if (state === null) {
    cromState.classList.remove("crom-state--success")
    cromState.classList.remove("crom-state--fail")
    cromState.innerText = ""
    return
  }
  if (state === 200) {
    cromState.classList.add("crom-state--success")
    cromState.innerText = "Success"
    cromStateTimer = setTimeout(() => setCromState(null), 2000)
    return
  }
  if (state === 404) {
    cromState.classList.add("crom-state--fail")
    cromState.innerText = "Not found"
    cromStateTimer = setTimeout(() => setCromState(null), 2000)
    return
  }
  if (state === 500) {
    cromState.classList.add("crom-state--fail")
    cromState.innerText = "Service error"
    cromStateTimer = setTimeout(() => setCromState(null), 2000)
    return
  }
}

const templates = {
  html: `<span class="hoverlink-card hoverlink-card--static"><span class="hoverlink-title">{hoverTitle}</span><span class="hoverlink-text">{hoverText}</span>{imageTemplate}</span> text text <span class="hoverlink"><a href="{linkUrl}">{linkText}</a><sup>ⓘ</sup></span> text text`,
  htmlImage: `<span class="hoverlink-image" style="--src: url({hoverImage})">-</span>`,
  ftml: `[[span class="hoverlink"]][[[{linkUrl}|{linkText}]]]^^ⓘ^^[[span class="hoverlink-card"]][[span class="hoverlink-title"]]{hoverTitle}[[/span]][[span class="hoverlink-text"]]{hoverText}[[/span]]{imageTemplate}[[/span]][[/span]]`,
  ftmlImage: `[[span class="hoverlink-image" style="--src: url({hoverImage})"]]-[[/span]]`,
}
function replaceTemplate(
  templateName, { linkUrl, linkText, hoverImage, hoverTitle, hoverText },
) {
  const imageTemplate = hoverImage
    ? templates[templateName + "Image"].replace("{hoverImage}", hoverImage)
    : ""
  return templates[templateName]
    .replace("{linkUrl}", linkUrl)
    .replace("{linkText}", linkText)
    .replace("{imageTemplate}", imageTemplate)
    .replace("{hoverTitle}", hoverTitle)
    .replace("{hoverText}", hoverText)
}

async function getFromCrom(url) {
  try {
    const response = await fetch(cromApi, {
      method: "POST",
      headers: {
        "Content-Type": "application/json; charset=utf-8"
      },
      body: JSON.stringify({
        query: cromQuery,
        variables: { url }
      }),
    })
    const result = await response.json()
    return result.data
  }
  catch (error) {
    setCromState(500)
    console.error("Crom error")
    throw error
  }
}

function guessCromUrl(inputUrl) {
  if (inputUrl.startsWith("http://")) return inputUrl
  if (inputUrl.startsWith("https://"))
    return inputUrl.replace("https://", "http://")
  return defaultWiki + inputUrl
}

function extractPreviewText(source) {
  const match = source.match(/component:preview.*?text\s*=(.*?)\]\]/s)
  if (!match) return defaultPreviewText
  return match[1].trim().slice(0, 300)
}

function getSmallImageUrl(imageUrl) {
  if (
    // Image is PNG, JPG or undefined (Wikidot will serve it as JPG)
    /(?:\.png|\.jpe?g|\/[^.]+)$/.test(imageUrl)
    // Image is hosted on Wikidot
    && imageUrl.includes("/local--files/")
  )
    return imageUrl.replace("/local--files/", "/local--resized-images/") + "/medium.jpg"
  // Don't change the URL for WEBP, SVG, or anything unaccounted for
  return imageUrl
}

cromFetch.addEventListener("click", async () => {
  const inputUrl = guessCromUrl(linkUrlInput.value)
  const data = await getFromCrom(inputUrl)

  if (data.page.wikidotInfo == null) {
    setCromState(404)
    return
  }

  saveToUndoCache()
  linkTextInput.value = data.page.wikidotInfo.title
  hoverTitleInput.value = data.page.wikidotInfo.title
  hoverTextInput.value = extractPreviewText(data.page.wikidotInfo.source)
  hoverImageInput.value = getSmallImageUrl(data.page.wikidotInfo.thumbnailUrl)

  setCromState(200)
  generatePreview()
})

function generatePreview() {
  previewer.innerHTML = replaceTemplate("html", {
    linkUrl: linkUrlInput.value,
    linkText: linkTextInput.value,
    hoverTitle: hoverTitleInput.value,
    hoverImage: hoverImageInput.value,
    hoverText: hoverTextInput.value,
  })

  output.value = replaceTemplate("ftml", {
    linkUrl: linkUrlInput.value,
    linkText: linkTextInput.value,
    hoverTitle: hoverTitleInput.value,
    hoverImage: hoverImageInput.value,
    hoverText: hoverTextInput.value,
  })
}

generator.addEventListener("submit", submitEvent => {
  submitEvent.preventDefault()
  generatePreview()
})

;[
  linkUrlInput,
  linkTextInput,
  hoverTitleInput,
  hoverTextInput,
  hoverImageInput
].forEach(input => {
  input.addEventListener("input", () => {
    generatePreview()
    clearUndoCache()
  })
})

clearer.addEventListener("click", () => {
  saveToUndoCache()
  linkUrlInput.value = ""
  linkTextInput.value = ""
  hoverTitleInput.value = ""
  hoverTextInput.value = ""
  hoverImageInput.value = ""
  generatePreview()
})

copy.addEventListener("click", () => {
  output.select()
  output.setSelectionRange(0, 99999)
  navigator.clipboard.writeText(output.value);
})

undoButton.addEventListener("click", () => applyUndoCache())

addEventListener("DOMContentLoaded", () => {
  linkUrlInput.value = "scp-" + (2000 + Math.ceil(Math.random() * 6000))
  generatePreview()
})
</script>

<script>
  document.head.appendChild(
    Object.assign(document.createElement("meta"), {
      name: "viewport",
      content: "width=device-width, initial-scale=1.0"
    })
  );
  document.head.appendChild(
    Object.assign(document.createElement("base"), {
      target: "_top",
    })
  );
  document.head.appendChild(
    Object.assign(document.createElement("link"), {
      href: "https://d3g0gp89917ko0.cloudfront.net/v--edac79f846ba/common--theme/base/css/style.css",
      rel: "stylesheet",
    })
  );
  document.head.appendChild(
    Object.assign(document.createElement("link"), {
      href: "https://cdn.scpwiki.com/theme/en/sigma/css/sigma.min.css",
      rel: "stylesheet",
    })
  );
  document.head.appendChild(
    Object.assign(document.createElement("link"), {
      href: "https://scp-wiki.wdfiles.com/local--code/component%3Ahoverlinks/1",
      rel: "stylesheet",
    })
  );
</script>
[[/html]]

++ Usage notes

+++ What should the hover text be?

You should heavily tailor the hover text to be specific to //your// article and the specific context of the link.

My recommendation is to think about why you're linking that article, and then state that reason as succinctly as possible, keeping it in-universe. E.g.:

* If I'm writing a story about e.g. antimemes and I want to link [[span class="hoverlink"]][[[scp-055|SCP-055]]]^^ⓘ^^[[span class="hoverlink-card"]][[span class="hoverlink-title"]]SCP-055[[/span]][[span class="hoverlink-text"]]Unknown object that cannot be remembered. The first antimeme acquired by the Foundation.[[/span]][[/span]][[/span]] because it was the first one, I might do exactly what I just did. Now the reader has access to the context behind my decision and they know it's just random worldbuilding they can ignore. They can keep reading my story.
* If I'm writing a story with required reading - let's say it's set in the End of Death canon - I might link to the hub by saying something like "as a result of the ongoing [[span class="hoverlink"]][[[end-of-death-hub|ΩK-Class Scenario]]]^^ⓘ^^[[span class="hoverlink-card"]][[span class="hoverlink-title"]]End of Death - Hub[[/span]][[span class="hoverlink-text"]]Active ΩK-Class Scenario precipitated by unknown events, resulting in the inability of any organism to die. All researchers are expected to be familiar.[[/span]][[span class="hoverlink-image" style="--src: url(https://scp-wiki.wdfiles.com/local--files/end-of-death-hub/1.png)"]]-[[/span]][[/span]][[/span]] something something etc". This lets the reader know, diegetically, that they probably should stop reading my story to go catch up.

Or, if you want to imply to the reader that they should go and read the linked page in full, or give the impression that they're reading a huge cohesive database of information, try adding enough text to the Hoverlink that it gets truncated and trails off - just like Wikipedia.

Avoid turning your Hoverlinks into blurbs, by e.g. including 'cool quotes' from the article, or reviews. The goal isn't to play salesperson by doing marketing on the reader. Instead, give them the tools they need to make an informed decision about whether they should click. Unless it's on an out-of-universe page, like your author page, in which case do whatever you want.

Avoid spoiling any twists in linked articles, too, if you can.

+++ What's with the little ⓘ symbols?

I think it's a good idea to visually indicate to the reader that a link is actually a Hoverlink. The wiki's been using links for almost two decades, and that's a lot of built-up familiarity. If you don't make it clear that a link is a Hoverlink, the vast majority of users will never know.

You might not think it's a good idea. You can get rid of it if you want. Just remove the {{@@^^ⓘ^^@@}} from the syntax.

+++ Should CSS themes style the Hoverlink?

Absolutely. If you are a creator of a Sigma theme, feel free to redecorate the Hoverlink to match. If you are a creator of a theme with a different base (BHL, Basalt), you should wait for the base theme to be updated to restyle this first.

+++ Why not have an [[include]] for the Hoverlink itself?

Because you can't [[include]] things in the middle of a line of text, which is where most links are.

+++ Can you have a Hoverlink that's not a link?

[[span class="hoverlink"]][# Sure]^^ⓘ^^[[span class="hoverlink-card"]][[span class="hoverlink-title"]]Hoverlinks![[/span]][[span class="hoverlink-text"]]Hoverlinks! Hoverlinks! Hoverlinks![[/span]][[/span]][[/span]]. All you need to do is put {{@@[# LINK_TEXT]@@}} instead of {{@@[[[LINK_URL | LINK_TEXT]]]@@}}. It still looks like a link (and it needs to be, so it can still be activated with keyboard navigation), but it doesn't go anywhere.


++ Source CSS

Here's the CSS for Hoverlinks:
[[/div]]

[[collapsible show="+ it's in here" hide="- hide source CSS"]]
[[code type="css"]]
/* HOVERLINKS! */
:root {
  /**
   * Configuration variables
   * CSS themes should start by changing these
   * Edit other properties only if necessary
   */

  --hoverlink-bg-color: white;
  --hoverlink-text-color: black;

  /* Vertical distance between popup and link */
  --hoverlink-distance: 0.5rem;

  /* How far the popup moves as it fades in */
  --hoverlink-motion-distance: 1rem;

  /* Width of the popup on desktop, including image */
  --hoverlink-width: 30rem;

  /* Height of the popup */
  --hoverlink-height: 12rem;

  /* Width of the image on desktop */
  --hoverlink-image-width: var(--hoverlink-height);

  /* Text at the bottom of the card. Set to "" to remove */
  --hoverlink-read-more: "↗ Read more";
}

.hoverlink > a[href="javascript:;"] ~ .hoverlink-card {
  --hoverlink-read-more: "";
}

.hoverlink {
  position: relative;
}
@media (max-width: 1200px) {
  .hoverlink {
    position: static;
  }
}

.hoverlink-card {
  display: grid;
  grid-template-areas: "title" "text";
  grid-template-rows: auto 1fr;
  border: thin solid #0006;
  border-radius: 0.25rem;
  width: calc(var(--hoverlink-width) - var(--hoverlink-image-width));
  height: var(--hoverlink-height);
  box-shadow: 0 2.5rem 5rem -1rem #0002;
  background-color: var(--hoverlink-bg-color);
  color: var(--hoverlink-text-color);
  text-align: left;
  font-style: normal;
  font-weight: normal;

  opacity: 0;
  visibility: hidden;
  transition-property: opacity, transform, visibility;
  transition-duration: 0.2s, 0.2s, 0s;
  transition-timing-function: ease-out;
  transition-delay: 0s, 0s, 0.4s;

  position: absolute;
  z-index: 9;
  top: 0; left: 50%;
  pointer-events: none;
  user-select: none;
  transform: translate( -50%, calc(
    -100%
    - var(--hoverlink-distance)
    + var(--hoverlink-motion-distance)
  ));
}
.hoverlink-card:where(:has(.hoverlink-image)) {
  grid-template-areas: "title image" "text image";
  grid-template-columns: auto var(--hoverlink-image-width);
  width: var(--hoverlink-width);
}
@media (max-width: 1200px) {
  .hoverlink-card {
    top: auto;
    transform: translate(-50%, calc(
      0px
      - var(--hoverlink-distance)
      + var(--hoverlink-motion-distance)
    ));
    --hoverlink-distance: 100% - 2rem;
  }
}
@media (max-width: 600px) {
  .hoverlink-card {
    --hoverlink-image-width: 16rem;
    width: 16rem;
    height: auto;
    min-height: var(--hoverlink-height);
    max-height: 15rem;
  }
  .hoverlink-card:has(.hoverlink-image) {
    height: 28rem;
    grid-template-areas: "title" "text" "image";
    grid-template-rows: auto 1fr var(--hoverlink-image-width);
    grid-template-columns: auto;
    max-height: none;
  }
}
.hoverlink-image {
  grid-area: image;
  aspect-ratio: 1;
  width: var(--hoverlink-image-width);
  background-image: var(--src);
  background-size: cover;
  background-position: center;
  color: transparent;
}
.hoverlink-title {
  grid-area: title;
  font-size: 1.2em;
  font-weight: 600;
  margin: 0.5rem;
}
.hoverlink-text {
  grid-area: text;
  margin-inline: 0.5rem;
  text-overflow: ellipsis;
  overflow: hidden;
  position: relative;
}
.hoverlink-text::after {
  position: absolute;
  pointer-events: none;
  inset: 0;
  background-image: linear-gradient(to bottom,
    transparent 70%,
    var(--hoverlink-bg-color) 95%
  );

  content: var(--hoverlink-read-more);
  font-size: 80%;
  display: flex;
  align-items: end;
  justify-content: end;
  opacity: 0.9;
}

.hoverlink > a {
  /* Disable page preview on iOS as this covers the popup and you can't dismiss it without dismissing the popup */
  -webkit-touch-callout: none;
}
.hoverlink > :is(a:hover, a:active, a:focus, sup:hover) ~ .hoverlink-card,
.hoverlink-card--static {
  opacity: 1;
  visibility: visible;
  --hoverlink-motion-distance: 0rem;
  transition-delay: 0.2s, 0.2s, 0s;
}
.hoverlink-card--static {
  position: relative;
  pointer-events: auto;
  user-select: auto;
  transform: translate(-50%, -0.5rem);
  --hoverlink-distance: 0.5rem;
  --hoverlink-motion-distance: 0rem;
}
.hoverlink > sup {
  user-select: none;
  top: -0.4em;
  margin-right: -0.25ch;
}

/* Remove 'read more' text when it's a fake link */
.hoverlink > a[href="javascript:;"] ~ .hoverlink-card {
  --hoverlink-read-more: "";
}
[[/code]]
[[/collapsible]]
[[/iftags]]

[[module css]]
@import url(https://scp-wiki.wdfiles.com/local--code/component%3Ahoverlinks/1);
[[/module]]

Hoverlinks! (link preview popups, like wikipedia)

Module Styles

Inline Styles

Includes

CSS Classes

Page Source