Antho Card X

Link to article: Antho Card X.

Module Styles

• .anthology-card.x4 .x-choice {
      display: grid;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;;
      grid-template-areas: "a";
      place-items: center;
      z-index: 4;
  }
  .anthology-card.x4:is(:hover,:focus-within) .x-choice,
  .anthology-card.x4 .x-choice:is(:hover,:focus-within) {
      opacity: 1;
      pointer-events: auto;
  }
  
  .anthology-card.x4 .x-choice::before,
  .anthology-card.x4 .x-choice::after {
      content: "";
      display: block;
      position: relative;
      width: 0;
      height: 0.675rem;
      background: var(--fg-accent);
      grid-area: a;
      z-index: 1;
      transition: width 0.25s ease-out;
  }
  .anthology-card.x4 .x-choice::before { transform: rotate(45deg); }
  .anthology-card.x4 .x-choice::after { transform: rotate(-45deg); }
  
  .anthology-card.x4:is(:hover,:focus-within) .x-choice::before,
  .anthology-card.x4:is(:hover,:focus-within) .x-choice::after {
      width: 100%;
  }
  
  .anthology-card.x4 :is(h1, .antho-title) { transition: opacity 0.125s; }
  .anthology-card.x4:is(:hover,:focus-within) :is(h1, .antho-title) { opacity: 0; }
  
  .anthology-card.x4 .x-choice .content {
      grid-area: a;
      display: grid;
      position: absolute;
      width: max-content;
      max-width: unset!important;
      grid-template-columns: 0 1fr 1fr 1fr 1fr 0;
      grid-template-rows: 1fr 1fr;
      grid-gap: 0.875rem;
      place-items: center;
      transform: scale(0);
      pointer-events: none;
      transition: transform 0.15s ease-out 0s;
  }
  .anthology-card.x4:is(:hover,:focus-within) .x-choice .content {
      transform: initial;
      transition: transform 0.1875s ease-out 0.2s;
  }
  
  .anthology-card.x4 .x-choice .content br { display: none; }
  .anthology-card.x4 .x-choice .content a:nth-of-type(1) {
      grid-column: 3/5;
      grid-row: 1/2;
      transform-origin: 50% 100%; align-items: flex-end; --deg: 0deg;
  }
  .anthology-card.x4 .x-choice .content a:nth-of-type(2) {
      grid-column: 2/4;
      grid-row: 1/3;
      transform-origin: 100% 50%; justify-content: flex-end; --deg: -90deg;
  }
  .anthology-card.x4 .x-choice .content a:nth-of-type(3) {
      grid-column: 4/6;
      grid-row: 1/3;
      transform-origin: 0% 50%; justify-content: flex-start; --deg: 90deg;
  }
  .anthology-card.x4 .x-choice .content a:nth-of-type(4) {
      grid-column: 3/5;
      grid-row: 2/3;
      transform-origin: 50% 0%; align-items: flex-start; --deg: 180deg;
  }
  
  .anthology-card.x4 .x-choice .content a {
      display: grid;
      height: 8rem;
      width: 8rem;
      background-image: var(--img);
      background-size: cover;
      clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0% 50%);
      place-items: center;
      font-family: 'Teko', 'Inter', sans-serif;
      font-size: 1.325em;
      padding: 1rem;
      box-sizing: border-box;
      isolation: isolate;
      position: relative;
      text-decoration: none;
      pointer-events: auto;
  }
  .anthology-card.x4 .x-choice .content a:is(:focus,:hover) {
      transform: scale(1.65);
      text-shadow: 0 0.1em 0.325rem black;
  }
  .anthology-card.x4 .x-choice .content a::after,
  .anthology-card.x4 .x-choice .content a::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1;
      background: linear-gradient(var(--deg), #000000ce 15%, transparent 55%);
  }
  .anthology-card.x4 .x-choice .content a::after {
      background: black;
      opacity: 0.775;
      transition: opacity 0.225s;
  }
  .anthology-card.x4 .x-choice .content a:is(:hover,:focus)::after {
      opacity: 0;
  }

Inline Styles

• --img: url({$img1})

• --img: url({$img2})

• --img: url({$img3})

• --img: url({$img4})

Includes

• (none)

CSS Classes

• anthology-card

• x4

• antho-title

• x-choice

• content

Page Source

[[div_ class="anthology-card x4"]]
[[[{$link}]]]
+ {$author}
[[image https://scp-wiki.wdfiles.com/local--files/scp-anthology-hub/static.jpg]]
[[div_ class="antho-title"]]
[[span]]X[[/span]][[span]]is for ...[[/span]]
[[/div]]
[[div class="x-choice"]]
[[div_ class="content"]]
[[a href="/{$link1}" style="--img: url({$img1})"]]{$name1}[[/a]]
[[a href="/{$link2}" style="--img: url({$img2})"]]{$name2}[[/a]]
[[a href="/{$link3}" style="--img: url({$img3})"]]{$name3}[[/a]]
[[a href="/{$link4}" style="--img: url({$img4})"]]{$name4}[[/a]]
[[/div]]
[[/div]]

[[/div]]

[[module css]]
.anthology-card.x4 .x-choice {
    display: grid;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;;
    grid-template-areas: "a";
    place-items: center;
    z-index: 4;
}
.anthology-card.x4:is(:hover,:focus-within) .x-choice,
.anthology-card.x4 .x-choice:is(:hover,:focus-within) {
    opacity: 1;
    pointer-events: auto;
}

.anthology-card.x4 .x-choice::before,
.anthology-card.x4 .x-choice::after {
    content: "";
    display: block;
    position: relative;
    width: 0;
    height: 0.675rem;
    background: var(--fg-accent);
    grid-area: a;
    z-index: 1;
    transition: width 0.25s ease-out;
}
.anthology-card.x4 .x-choice::before { transform: rotate(45deg); }
.anthology-card.x4 .x-choice::after { transform: rotate(-45deg); }

.anthology-card.x4:is(:hover,:focus-within) .x-choice::before,
.anthology-card.x4:is(:hover,:focus-within) .x-choice::after {
    width: 100%;
}

.anthology-card.x4 :is(h1, .antho-title) { transition: opacity 0.125s; }
.anthology-card.x4:is(:hover,:focus-within) :is(h1, .antho-title) { opacity: 0; }

.anthology-card.x4 .x-choice .content {
    grid-area: a;
    display: grid;
    position: absolute;
    width: max-content;
    max-width: unset!important;
    grid-template-columns: 0 1fr 1fr 1fr 1fr 0;
    grid-template-rows: 1fr 1fr;
    grid-gap: 0.875rem;
    place-items: center;
    transform: scale(0);
    pointer-events: none;
    transition: transform 0.15s ease-out 0s;
}
.anthology-card.x4:is(:hover,:focus-within) .x-choice .content {
    transform: initial;
    transition: transform 0.1875s ease-out 0.2s;
}

.anthology-card.x4 .x-choice .content br { display: none; }
.anthology-card.x4 .x-choice .content a:nth-of-type(1) {
    grid-column: 3/5;
    grid-row: 1/2;
    transform-origin: 50% 100%; align-items: flex-end; --deg: 0deg;
}
.anthology-card.x4 .x-choice .content a:nth-of-type(2) {
    grid-column: 2/4;
    grid-row: 1/3;
    transform-origin: 100% 50%; justify-content: flex-end; --deg: -90deg;
}
.anthology-card.x4 .x-choice .content a:nth-of-type(3) {
    grid-column: 4/6;
    grid-row: 1/3;
    transform-origin: 0% 50%; justify-content: flex-start; --deg: 90deg;
}
.anthology-card.x4 .x-choice .content a:nth-of-type(4) {
    grid-column: 3/5;
    grid-row: 2/3;
    transform-origin: 50% 0%; align-items: flex-start; --deg: 180deg;
}

.anthology-card.x4 .x-choice .content a {
    display: grid;
    height: 8rem;
    width: 8rem;
    background-image: var(--img);
    background-size: cover;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0% 50%);
    place-items: center;
    font-family: 'Teko', 'Inter', sans-serif;
    font-size: 1.325em;
    padding: 1rem;
    box-sizing: border-box;
    isolation: isolate;
    position: relative;
    text-decoration: none;
    pointer-events: auto;
}
.anthology-card.x4 .x-choice .content a:is(:focus,:hover) {
    transform: scale(1.65);
    text-shadow: 0 0.1em 0.325rem black;
}
.anthology-card.x4 .x-choice .content a::after,
.anthology-card.x4 .x-choice .content a::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background: linear-gradient(var(--deg), #000000ce 15%, transparent 55%);
}
.anthology-card.x4 .x-choice .content a::after {
    background: black;
    opacity: 0.775;
    transition: opacity 0.225s;
}
.anthology-card.x4 .x-choice .content a:is(:hover,:focus)::after {
    opacity: 0;
}
[[/module]]