SCP-173 Redesign Collab: Gallery 6

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

/* 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/942056621486522419/scp_173.png" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942056621486522419/scp_173.png" >
   </a>
   <span class="caption"><a href="http://instagram.com/leo_the_ceo_of_furry" target="_blank">the_ceo_of_funny</a></span>
</div>

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

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

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

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942055662756708393/SCp-173_Redesign_JA.png" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942055662756708393/SCp-173_Redesign_JA.png" >
   </a>
   <span class="caption">FNAFguy</span>
</div>

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

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

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

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942054648590774272/FKvkKupaMA4-wQu.png?width=625&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942054648590774272/FKvkKupaMA4-wQu.png?width=625&height=625" >
   </a>
   <span class="caption"><a href="https://instagram.com/malcrow7/?hl=en" target="_blank">@malcrow7</a></span>
</div>

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

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

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

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

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

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

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

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

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942053726712102972/FK0Fl--WQAQ-_s8.png?width=569&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942053726712102972/FK0Fl--WQAQ-_s8.png?width=569&height=625" >
   </a>
   <span class="caption"><a href="https://twitter.com/wifi_failure" target="_blank">@wifi_failure</a></span>
</div>

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

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

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

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

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

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

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

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

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

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

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942051576510574612/FLDRwojXIAEWSwd.png?width=594&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942051576510574612/FLDRwojXIAEWSwd.png?width=594&height=625" >
   </a>
   <span class="caption"><a href="https://abstractfigure.com/" target="_blank">@JCodyLambert</a></span>
</div>

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

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

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942051261484773426/FLHEbbTWYAEb8xG.png?width=637&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942051261484773426/FLHEbbTWYAEb8xG.png?width=637&height=625" >
   </a>
   <span class="caption"><a href="https://instagram.com/nanaturbii/" target="_blank">@na_naturbii</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942051083621126144/FLH9GG3UUAMpW-7.png?width=914&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942051083621126144/FLH9GG3UUAMpW-7.png?width=914&height=625" >
   </a>
   <span class="caption"><a href="https://twitter.com/DeckOfSpadesArt" target="_blank">@DeckOfSpadesArt</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942050973407391774/FLLInM_XoAM-S7s.png?width=871&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942050973407391774/FLLInM_XoAM-S7s.png?width=871&height=625" >
   </a>
   <span class="caption"><a href="https://twitter.com/numituzineru" target="_blank">@numituzineru</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942050972790849566/FLLInNBXIAMzxtl.png?width=388&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942050972790849566/FLLInNBXIAMzxtl.png?width=388&height=625" >
   </a>
   <span class="caption"><a href="https://twitter.com/numituzineru" target="_blank">@numituzineru</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 6

Module Styles

Inline Styles

Includes

CSS Classes

Page Source