SCP-173 Redesign Collab: Gallery 1

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

/* 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/941522228334436382/VWIu5Cpx.png?width=520&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/941522228334436382/VWIu5Cpx.png?width=520&height=625" >
   </a>
   <span class="caption"><a href="https://twitter.com/Pandasys_draw" target="_blank">@Pandasys_draw</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/941522122721853482/5hvBXTP-.png?width=360&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/941522122721853482/5hvBXTP-.png?width=360&height=625" >
   </a>
   <span class="caption"><a href="https://twitter.com/captaintaco2345" target="_blank">@captaintaco2345</a></span>
</div>

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

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

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

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

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

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

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

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

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

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/941520874345996308/WZRYjEET.png?width=553&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/941520874345996308/WZRYjEET.png?width=553&height=625" >
   </a>
   <span class="caption"><a href="https://twitter.com/acidkidofficial" target="_blank">GraveCreations</a></span>
</div>

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

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

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

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

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

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

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

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

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/938594489071726592/1zHXiFTm.png?width=489&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/938594489071726592/1zHXiFTm.png?width=489&height=625" >
   </a>
   <span class="caption"><a href="https://twitter.com/CarrotNoah" target="_blank">@noah_drawstuff</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/938562344127176705/FKme0CkXIAYFI_O.jpg" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/938562344127176705/FKme0CkXIAYFI_O.jpg" >
   </a>
   <span class="caption"><a href="https://twitter.com/Valdevia_Art" target="_blank">@Valdevia_Art</a></span>
</div>

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

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

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

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

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/938560945146441778/FKnPIrNXsAI7-Ow.png?width=612&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/938560945146441778/FKnPIrNXsAI7-Ow.png?width=612&height=625" >
   </a>
   <span class="caption"><a href="https://twitter.com/kura_art" target="_blank">@kura_art</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/938560186543665172/SOUa-nyJ.png?width=528&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/938560186543665172/SOUa-nyJ.png?width=528&height=625" >
   </a>
   <span class="caption"><a href="https://twitter.com/NollybyNolly" target="_blank">@NollybyNolly</a></span>
</div>

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

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

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/938557554538201128/iZOtfhlF.png?width=448&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/938557554538201128/iZOtfhlF.png?width=448&height=625">
  </a>
   <span class="caption"><a href="https://www.christinekilfoil.com/" target="_blank">Chris(tine) Kilfoil</a></span>
</div>

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

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

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

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/938559638377488384/DB3x6MtE.png?width=255&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/938559638377488384/DB3x6MtE.png?width=255&height=625" >
   </a>
   <span class="caption"><a href="https://twitter.com/GuyofSpicy" target="_blank">@GuyofSpicy</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 1

Module Styles

Inline Styles

Includes

CSS Classes

Page Source