SCP Hover Box

Link to article: SCP Hover Box.

h1, h2 {
    text-align: center;
}

.help {
    display: flex;
    align-content: stretch;
    padding-top: 1em;
}

.help blockquote {
    margin: 0;
    font-size: 85%;
}

.help blockquote > p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    margin-right: 0;
    min-height: 2rem;
    margin: 0;
}

.help blockquote > p * {
    margin: 0 0.1rem;
    height: 100%;
}

.help blockquote:nth-of-type(1) {
    background: transparent;
    border: unset;
    box-shadow: unset;
    text-align: right;
    margin-right: 0;
    padding: 0;
}

.help blockquote:nth-of-type(1) > p {
    justify-content: flex-end;
}

.help blockquote:nth-of-type(2) {
    margin-left: 1em;
    width: 50%;
}

(none)

```
help
```

[[>]]
[[module Rate]]
[[/>]]
[[module css]]
h1, h2 {
    text-align: center;
}

.help {
    display: flex;
    align-content: stretch;
    padding-top: 1em;
}

.help blockquote {
    margin: 0;
    font-size: 85%;
}

.help blockquote > p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    margin-right: 0;
    min-height: 2rem;
    margin: 0;
}

.help blockquote > p * {
    margin: 0 0.1rem;
    height: 100%;
}

.help blockquote:nth-of-type(1) {
    background: transparent;
    border: unset;
    box-shadow: unset;
    text-align: right;
    margin-right: 0;
    padding: 0;
}

.help blockquote:nth-of-type(1) > p {
    justify-content: flex-end;
}

.help blockquote:nth-of-type(2) {
    margin-left: 1em;
    width: 50%;
}
[[/module]]

[[include component:scp-hover-box-styling]]

[[include component:scp-hover-box-structure
|container-number=one
|corner-cutout=1em
|container-bgcolor=rgba(252, 252, 252)
|container-txtcolor=rgba(12, 12, 12)
|container-hover-bgcolor=rgba(12, 12, 12)
|container-hover-txtcolor=rgba(252, 252, 252)
|container-stroke-color=rgba(244, 244, 244)
|container-hover-stroke-color=rgba(180, 35, 35)
|background-url=https://scp-wiki.wikidot.com/local--files/component:scp-hover-box/scp-2105.gif
|background-vertical-position=30%
|link-fill-color=rgba(252, 252, 252)
|link-stroke-width=0.125rem
|link-stroke-color=rgba(12, 12, 12)
|anchor=4205
|link=https://scp-wiki.wikidot.com/scp-4205
|title=SCP-4205
|sub-title=In the Eyes of the Beholder
|blerb=**“If you remember me, then I don't care if everyone else forgets” ― Haruki Murakami, Kafka On the Shore**
]]

+ How to use

++ 1. Copy code below.
++ 2. Follow guide on the bottom.

+++ Only needed once.
> @@[[include component:scp-hover-box-styling]]@@

+++ Needed per Hover Box
> @@[[include component:scp-hover-box-structure@@
> @@|container-number=one@@
> @@|corner-cutout=1em@@
> @@|container-bgcolor=rgba(252, 252, 252)@@
> @@|container-txtcolor=rgba(12, 12, 12)@@
> @@|container-hover-bgcolor=rgba(12, 12, 12)@@
> @@|container-hover-txtcolor=rgba(252, 252, 252)@@
> @@|container-stroke-color=rgba(244, 244, 244)@@
> @@|container-hover-stroke-color=rgba(180, 35, 35)@@
> @@|background-url=https://scp-wiki.wikidot.com/local--files/component:scp-hover-box/scp-2105.gif@@
> @@|background-vertical-position=30%@@
> @@|link-fill-color=rgba(252, 252, 252)@@
> @@|link-stroke-width=0.125rem@@
> @@|link-stroke-color=rgba(12, 12, 12)@@
> @@|anchor=4205@@
> @@|link=https://scp-wiki.wikidot.com/scp-4205@@
> @@|title=SCP-4205@@
> @@|sub-title=In the Eyes of the Beholder@@
> @@|blerb=**“If you remember me, then I don't care if everyone else forgets” ― Haruki Murakami, Kafka On the Shore**@@
> @@]]@@

[[div_ class="help"]]
> Only needs to be included once at the very top of the page. ↦ 
> 
> 
> Beginning of component include. **Will need to paste this entire code per block.** ↦ 
> 
> Unique name given per-box on page. **Use words, not numbers.** ↦
> 
> Amount removed from the corners. //Set to 0 for square.// ↦ 
> 
> Color of BG **without** hovering //(accepts hex, rgb, rgba, hsl)// ↦ 
> 
> Color of Text **without** hovering //(accepts hex, rgb, rgba, hsl)// ↦ 
> 
> Color of BG **while** hovering //(accepts hex, rgb, rgba, hsl)// ↦ 
> 
> Color of Text **while** hovering //(accepts hex, rgb, rgba, hsl)// ↦ 
> 
> Stroke of Box **without** hovering //(accepts hex, rgb, rgba, hsl)// ↦ 
> 
> Stroke of Box **with** hovering //(accepts hex, rgb, rgba, hsl)// ↦ 
> 
> Url to any background image for header ↦ 
> 
> Vertical position of header image. Set to 0 for default. //(accepts px, rem, em, %)// ↦ 
> 
> Color of Header Text //(accepts hex, rgb, rgba, hsl)// ↦ 
> 
> Width of Header Text Stroke //Set to 0 for no stroke// ↦ 
> 
> Color of Header Text Stroke //(accepts hex, rgb, rgba, hsl)// ↦ 
> 
> If including a navigation, this can be used to set anchor spot ↦
> 
> Link to Article ↦ 
> 
> Title of Article ↦ 
> 
> Subtitle of Article ↦ 
> 
> Text for the bottom section. //Can use formatting.// ↦ 
> 
> 

> [[include component:scp-hover-box-styling]]
> 
> 
> [[include component:scp-hover-box-structure
> 
> |**container-number**=one
> 
> |**corner-cutout**=1em
> 
> |**container-bgcolor**=rgba(252, 252, 252)
> 
> |**container-txtcolor**=rgba(12, 12, 12)
> 
> |**container-hover-bgcolor**=rgba(12, 12, 12)
> 
> |**container-hover-txtcolor**=rgba(252, 252, 252)
> 
> |**container-stroke-color**=rgba(244, 244, 244)
> 
> |**container-hover-stroke-color**=rgba(180, 35, 35)
> 
> |**background-url**=@@https://thisisalink.com/image.jpg@@
> 
> |**background-vertical-position**=30%
> 
> |**link-fill-color**=rgba(252, 252, 252)
> 
> |**link-stroke-width**=0.125rem
> 
> |**link-stroke-color**=rgba(12, 12, 12)
> 
> |**anchor**=4205
> 
> |**link**=@@https://scp-wiki.wikidot.com/scp-4205@@
> 
> |**title**=SCP-4205
> 
> |**sub-title**=In the Eyes of the Beholder
> 
> |**blerb**@@=**This is a blerb!**@@
> 
> ]]
> 
[[/div]]

SCP Hover Box

Module Styles

Inline Styles

Includes

CSS Classes

Page Source