SCP-173 Redesign Collab: Gallery 2

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

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

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

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

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

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

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

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/941529015263571968/02_SCP_173_b.jpg?width=723&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/941529015263571968/02_SCP_173_b.jpg?width=723&height=625" >
   </a>
   <span class="caption"><a href="https://twitter.com/NEBULArobo" target="_blank">@NEBULArobo</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/941529014365982790/02_SCP_173_a.jpg?width=723&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/941529014365982790/02_SCP_173_a.jpg?width=723&height=625" >
   </a>
   <span class="caption"><a href="https://twitter.com/NEBULArobo" target="_blank">@NEBULArobo</a></span>
</div>

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

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

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

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

<div class="imagebox">
   <a href="https://twitter.com/hardly_knewer/status/1490075517390831618" target="_blank">
   <img src="https://pbs.twimg.com/media/FK3QE6hXMAwdlJJ?format=jpg&name=large" >
   </a>
   <span class="caption"><a href="https://twitter.com/hardly_knewer" target="_blank">@hardly_knewer</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/941526726620626984/9HLs-hhT.png?width=469&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/941526726620626984/9HLs-hhT.png?width=469&height=625" >
   </a>
   <span class="caption"><a href="https://instagram.com/talena.caro/" target="_blank">@TalenaCaro</a></span>
</div>

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

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

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

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/941525426566738010/LhWWxOiU.png?width=777&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/941525426566738010/LhWWxOiU.png?width=777&height=625" >
   </a>
   <span class="caption"><a href="" target="_blank">NebulousStar</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/941525349378977832/QPxiboU9.png?width=884&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/941525349378977832/QPxiboU9.png?width=884&height=625" >
   </a>
   <span class="caption"><a href="https://www.pixiv.net/en/users/15524368" target="_blank">@GrotesqueRampag</a></span>
</div>

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

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

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/941524209459429386/jnbvCfW6.png?width=833&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/941524209459429386/jnbvCfW6.png?width=833&height=625" >
   </a>
   <span class="caption"><a href="https://tiktok.com/@ironshearss" target="_blank">IronShears</a></span>
</div>

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

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

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

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/941523356761608252/XD-Qydr2.png?width=625&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/941523356761608252/XD-Qydr2.png?width=625&height=625" >
   </a>
   <span class="caption"><a href="https://www.instagram.com/darian_quilloy/" target="_blank">@Darian_Quilloy</a></span>
</div>

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

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/941523189731848212/7-6OvDXj.png" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/941523189731848212/7-6OvDXj.png" >
   </a>
   <span class="caption"><a href="https://twitter.com/TraceyTonight" target="_blank">@TraceyTonight</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/941523023813566494/0nqTgOxO.png?width=1335&height=624" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/941523023813566494/0nqTgOxO.png?width=1335&height=624" >
   </a>
   <span class="caption"><a href="https://twitter.com/Motfal" target="_blank">@Motfal</a></span>
</div>

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

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/941522812999450644/kz4VczE0.png?width=559&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/941522812999450644/kz4VczE0.png?width=559&height=625" >
   </a>
   <span class="caption"><a href="https://twitter.com/ethanmcarpenter" target="_blank">syzygy#6185</a></span>
</div>

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

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/941522590357409802/RDILq5aI.png?width=801&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/941522590357409802/RDILq5aI.png?width=801&height=625" >
   </a>
   <span class="caption"><a href="https://scp-wiki.wikidot.com/pastarasta1-s-author-page" target="_blank">ratking666</a></span>
</div>

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

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/941522354268430346/Cxsp3Tmw.png?width=489&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/941522354268430346/Cxsp3Tmw.png?width=489&height=625" >
   </a>
   <span class="caption"><a href="https://twitter.com/Jolanos1" target="_blank">@Jolanos1</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 2

Module Styles

Inline Styles

Includes

CSS Classes

Page Source