SCP-173 Redesign Collab: Gallery 7

Link to article: SCP-173 Redesign Collab: Gallery 7.

/* isolates wideness to this class */
.widebox {
   width: 99.3vw;
   max-width: 100vw !important;
   position: relative;
   left: calc(-49.65vw + 50%);
}
/* centers page title */
#page-title {
  text-align: center;
}

/* destroys the second brazil in the page */
#page-content p br:nth-child(2) {
  display: none;
}

(none)

:scp-wiki:theme:basalt [info]

```
widebox
```
```
imagecollection
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```

[[include :scp-wiki:theme:basalt darkmode=a]]

[[module css]]
/* isolates wideness to this class */
.widebox {
   width: 99.3vw;
   max-width: 100vw !important;
   position: relative;
   left: calc(-49.65vw + 50%);
}
/* centers page title */
#page-title {
  text-align: center;
}

/* destroys the second brazil in the page */
#page-content p br:nth-child(2) {
  display: none;
}
[[/module]]

[[=]]
[[module Rate]]
[[/=]]
------
[[=]]

@@
@@
@@
@@

+ __Please visit [[[peanut-gallery|hub page]]] for further galleries.__

@@
@@
@@
@@

[[/=]]

[[div class="widebox"]]

------

[[html]]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300');

/* contains multitudes..... and images */
.imagecollection {
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
   padding: 0;
}

/* makes ur image boxes square  */
.imagecollection .imagebox {
  background: transparent;
  position: relative;
  box-sizing: border-box;
  width: 14.1vw;
  height: 14.1vw;
  margin: 0;
}

/* adds that hover gradient to each image box */
.imagecollection .imagebox:before{
  content: "";
  position: absolute;
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 35%);
  height: 100%;
  width: 100%;
  z-index: 1;
  opacity: 0.75;
  transition: 0.5s;
  pointer-events: none;
}

.imagecollection .imagebox:hover:before {
  opacity: 1;
}

/* the image */
.imagecollection .imagebox img {
  display: block;
  margin: auto;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

/* caption below every image ,,,. */
.caption {
  padding: 0.8em;
  bottom: 0;
  position: absolute;
  z-index: 2;
}
.caption a {
  color: white;
  font-family: 'Open Sans';
  font-size: 1.5em;
  text-decoration: none;
}

.caption a:hover {
  color: white;
  text-decoration: underline;
}

/* mobile shit */
@media screen and (max-width: 1200px) {
  .imagecollection .imagebox {
    width: 24.82vw;
    height: 24.82vw;
  }
}

@media screen and (max-width: 640px) {
  .imagecollection .imagebox {
    width: 100vw;
    height: 56.25vw;
  }
}
</style>
<div class="imagecollection">

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942561405507371068/FLWNglkVgAA9aEY.png?width=422&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942561405507371068/FLWNglkVgAA9aEY.png?width=422&height=625">
   </a>
   <span class="caption"><a href="http://ko.scp-wiki.net/prairia-artworks" target="_blank">@prairia_ko</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942561225890463744/FLZ3rpqXoAALiyN.png?width=437&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942561225890463744/FLZ3rpqXoAALiyN.png?width=437&height=625">
   </a>
   <span class="caption"><a href="https://twitter.com/BionicoBandito" target="_blank">@BionicoBandito</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942237596787015761/FLVxtO-X0AEVkF7.png?width=625&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942237596787015761/FLVxtO-X0AEVkF7.png?width=625&height=625">
   </a>
   <span class="caption"><a href="https://instagram.com/observantbunny/" target="_blank">@JokersBunny</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942211332126675014/FLW8R0UXwAMoHGo.png?width=415&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942211332126675014/FLW8R0UXwAMoHGo.png?width=415&height=625">
   </a>
   <span class="caption"><a href="https://twitter.com/pangletang" target="_blank">@pangletang</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942209398942621726/FLW3gt2XoAI-hCv.png?width=469&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942209398942621726/FLW3gt2XoAI-hCv.png?width=469&height=625">
   </a>
   <span class="caption"><a href="https://twitter.com/JacobBrownSWC" target="_blank">@JacobBrownSWC</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942206664579366933/FLSJFfKVgAA2-zM.png?width=536&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942206664579366933/FLSJFfKVgAA2-zM.png?width=536&height=625">
   </a>
   <span class="caption"><a href="https://twitter.com/anomalous_radio" target="_blank">@anomalous_radio</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942204062382841876/PGzu0Seq.png?width=469&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942204062382841876/PGzu0Seq.png?width=469&height=625">
   </a>
   <span class="caption"><a href="https://www.reddit.com/user/LxlithAftxncos" target="_blank">@LxlithAftxncos</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942115500530491442/FLUwHYnXMAQ_VRb.png?width=509&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942115500530491442/FLUwHYnXMAQ_VRb.png?width=509&height=625">
   </a>
   <span class="caption"><a href="https://twitter.com/AlvSoir" target="_blank">@AlvSoir</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942114642329755668/FLaEpZyXsAcCbDf.png?width=625&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942114642329755668/FLaEpZyXsAcCbDf.png?width=625&height=625" >
   </a>
   <span class="caption"><a href="https://twitter.com/YaBoiMBones" target="_blank">@YaBoiMBones</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942113352086351952/FLPz1JcVUAsua7l.png?width=468&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942113352086351952/FLPz1JcVUAsua7l.png?width=468&height=625" >
   </a>
   <span class="caption"><a href="https://twitter.com/CahillComics" target="_blank">@CahillComics</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942112987643256893/FLQK2kWXEAUZILs.png?width=401&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942112987643256893/FLQK2kWXEAUZILs.png?width=401&height=625" >
   </a>
   <span class="caption"><a href="https://twitter.com/CFMination" target="_blank">@CFMination</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942111854874984538/FLZmU1KXoAECdkN.png?width=521&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942111854874984538/FLZmU1KXoAECdkN.png?width=521&height=625" >
   </a>
   <span class="caption"><a href="https://twitter.com/antthonygallego" target="_blank">@antthonygallego</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942111738080424016/FLXwGvjagAQya5b.png?width=625&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942111738080424016/FLXwGvjagAQya5b.png?width=625&height=625" >
   </a>
   <span class="caption"><a href="https://instagram.com/mark0riginals/" target="_blank">@Mark0riginals</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942110744114266143/FLRyJzqXsAA9PIw.png?width=244&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942110744114266143/FLRyJzqXsAA9PIw.png?width=244&height=625" >
   </a>
   <span class="caption"><a href="https://twitter.com/HitenNoRurouni/" target="_blank">@HitenNoRurouni</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942109526914637865/FLUjobrXwAIU1Js.png" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942109526914637865/FLUjobrXwAIU1Js.png" >
   </a>
   <span class="caption"><a href="https://instagram.com/kwiatkoversum/" target="_blank">@Retr0n666</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942108216400171068/FLShv5tXwAEMRaw.png?width=410&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942108216400171068/FLShv5tXwAEMRaw.png?width=410&height=625" >
   </a>
   <span class="caption"><a href="https://twitter.com/kaleidosouls" target="_blank">@kaleidosouls</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942060772618534912/IMG_7195_1_1.png?width=563&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942060772618534912/IMG_7195_1_1.png?width=563&height=625" >
   </a>
   <span class="caption"><a href="https://twitter.com/klarabellum" target="_blank">@klarabellum</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942059716958375956/SCP-173.png" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942059716958375956/SCP-173.png" >
   </a>
   <span class="caption"><a href="https://twitter.com/TanmayBhemde" target="_blank">@TanmayBhemde</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942059576625360926/IMG_1051.png" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942059576625360926/IMG_1051.png" >
   </a>
   <span class="caption"><a href=""" target="_blank">Vicko77</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942059520035807242/magoo1125_scp173.png" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942059520035807242/magoo1125_scp173.png" >
   </a>
   <span class="caption"><a href="https://www.reddit.com/user/VeryLargeArray" target="_blank">VeryLargeArray</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942059431359836180/5_Sem_Titulo_20220210233739.png" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942059431359836180/5_Sem_Titulo_20220210233739.png" >
   </a>
   <span class="caption"><a href="https://instagram.com/pitukaart/" target="_blank">@pitukaart</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942059281719656478/Peanut_Remake.png" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942059281719656478/Peanut_Remake.png" >
   </a>
   <span class="caption"><a href="https://instagram.com/koha_9999/" target="_blank">@koha_9999</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942059150421155871/Untitled_Artwork.png" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942059150421155871/Untitled_Artwork.png" >
   </a>
   <span class="caption"><a href="https://twitter.com/MirroredPuns" target="_blank">@MirroredPuns</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942059027288977518/Scp_173_ya_rocketpotatoL62.png" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942059027288977518/Scp_173_ya_rocketpotatoL62.png" >
   </a>
   <span class="caption"><a href="https://twitter.com/RocketPotato6" target="_blank">@RocketPotato6</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942058934896836608/173.png?width=1071&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942058934896836608/173.png?width=1071&height=625" >
   </a>
   <span class="caption"><a href="https://www.instagram.com/dina_flaytik/" target="_blank">dina_flaytik</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942058781595037756/IMG_20220206_1054355452.png" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942058781595037756/IMG_20220206_1054355452.png" >
   </a>
   <span class="caption"><a href="https://twitter.com/MikeABC8" target="_blank">@MikeABC8</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942058781339172935/IMG_20220209_1513288552.png" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942058781339172935/IMG_20220209_1513288552.png" >
   </a>
   <span class="caption"><a href="https://twitter.com/MikeABC8" target="_blank">@MikeABC8</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942058609632763914/TheBride.png" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942058609632763914/TheBride.png" >
   </a>
   <span class="caption"><a href="https://twitter.com/idmns" target="_blank">@idmns</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942058609297203320/Big173.png" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942058609297203320/Big173.png" >
   </a>
   <span class="caption"><a href="https://twitter.com/idmns" target="_blank">@idmns</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942058436781305887/IMG_5080.png" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942058436781305887/IMG_5080.png" >
   </a>
   <span class="caption"><a href="https://twitter.com/Cole13scp" target="_blank">@Cole13scp</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942058436051480606/173new.png" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942058436051480606/173new.png" >
   </a>
   <span class="caption"><a href="https://twitter.com/Cole13scp" target="_blank">@Cole13scp</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942058278727319652/FK472kLXsAAG0oM.png" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942058278727319652/FK472kLXsAAG0oM.png" >
   </a>
   <span class="caption"><a href="https://twitter.com/SnugBoat11" target="_blank">@SnugBoat11</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942058162415083570/IMG_4445.png" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942058162415083570/IMG_4445.png" >
   </a>
   <span class="caption"><a href="https://twitter.com/DrWhitney5" target="_blank">@DrWhitney5</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942057738731683850/unknown.png" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942057738731683850/unknown.png" >
   </a>
   <span class="caption"><a href="https://twitter.com/lukeb0und" target="_blank">@lukeb0und</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942057628819922995/FK27b54XMA4Db66.png?width=436&height=624" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942057628819922995/FK27b54XMA4Db66.png?width=436&height=624" >
   </a>
   <span class="caption"><a href="https://twitter.com/luxaiko" target="_blank">@luxaiko</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942057493838823444/FK2_CfUUcAAOreZ.png?width=469&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942057493838823444/FK2_CfUUcAAOreZ.png?width=469&height=625" >
   </a>
   <span class="caption"><a href="https://twitter.com/eddybird55555" target="_blank">@eddybird55555</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942057493155180564/FLHDwjMVQAUD0p9.png?width=469&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942057493155180564/FLHDwjMVQAUD0p9.png?width=469&height=625" >
   </a>
   <span class="caption"><a href="https://twitter.com/eddybird55555" target="_blank">@eddybird55555</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942057492207255582/FLO50Z-VIAIoPMn.png?width=469&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942057492207255582/FLO50Z-VIAIoPMn.png?width=469&height=625" >
   </a>
   <span class="caption"><a href="https://twitter.com/eddybird55555" target="_blank">@eddybird55555</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942057218730237962/SCP-173_DarkoBrevic_.png" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942057218730237962/SCP-173_DarkoBrevic_.png" >
   </a>
   <span class="caption"><a href=""" target="_blank">DarkoBrevic</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942056989196951572/SCP-173_by_irys.png" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942056989196951572/SCP-173_by_irys.png" >
   </a>
   <span class="caption"><a href="https://twitter.com/cinnabanulon" target="_blank">@cinnabanulon</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942056905428324422/scp.png" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942056905428324422/scp.png" >
   </a>
   <span class="caption"><a href="https://twitter.com/Lesbian_SIoth" target="_blank">@Lesbian_SIoth</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942056792555405332/Untitled184_20220207073441.png" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942056792555405332/Untitled184_20220207073441.png" >
   </a>
   <span class="caption"><a href="https://www.wikidot.com/user:info/A_A_Antares" target="_blank">A_A_Antares</a></span>
</div>



</div>
<script>
var cards = $(".imagebox");
console.log(cards.length);
for(var i = 0; i < cards.length; i++){
    var target = Math.floor(Math.random() * cards.length -1) + 1;
    var target2 = Math.floor(Math.random() * cards.length -1) +1;
    cards.eq(target).before(cards.eq(target2));
}
</script>
[[/html]]
[[/div]]

SCP-173 Redesign Collab: Gallery 7

Module Styles

Inline Styles

Includes

CSS Classes

Page Source