SCP-173 Redesign Collab: Gallery 5

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

/* 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
```

[[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/942050829039443988/FLKkfu-XIAYLsOO.png?width=1164&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942050829039443988/FLKkfu-XIAYLsOO.png?width=1164&height=625" >
   </a>
   <span class="caption"><a href="https://twitter.com/joqueeb" target="_blank">@joqueeb</a></span>
</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942049221115269120/1Lb_oA-V.png?width=625&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942049221115269120/1Lb_oA-V.png?width=625&height=625" >
   </a>
   <span class="caption"><a href="https://twitter.com/NahImGo55923716" target="_blank">@NahImGo55923716</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942049142505607198/8o7upnXn.png?width=492&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942049142505607198/8o7upnXn.png?width=492&height=625" >
   </a>
   <span class="caption"><a href="https://jamesbear.artstation.com/projects" target="_blank">@JamesBearArt</a></span>
</div>

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

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

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

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

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

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942045585878429706/FLGLgEaXIAItrrc.png?width=440&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942045585878429706/FLGLgEaXIAItrrc.png?width=440&height=625" >
   </a>
   <span class="caption"><a href="https://instagram.com/ibi_draws_monsters" target="_blank">@Ibi_le_Zombie</a></span>
</div>

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

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

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

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

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

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

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

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942044654671659059/-HZhNV77.png?width=531&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942044654671659059/-HZhNV77.png?width=531&height=625" >
   </a>
   <span class="caption"><a href="https://twitter.com/MosquitoKing12" target="_blank">@MosquitoKing12</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 5

Module Styles

Inline Styles

Includes

CSS Classes

Page Source