SCP-173 Redesign Collab: Gallery 3

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

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

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

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942040644380164106/SCP-173.png?width=442&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942040644380164106/SCP-173.png?width=442&height=625" >
   </a>
   <span class="caption"><a href="https://linktr.ee/_stellasin_" target="_blank">_stellasin_</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942040471058919504/FLGIYfsUcAIehIC.jpg?width=727&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942040471058919504/FLGIYfsUcAIehIC.jpg?width=727&height=625" >
   </a>
   <span class="caption"><a href="https://twitter.com/owldollarts" target="_blank">@owldollarts</a></span>
</div>

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942040470735978596/FLGI-F9VgAEUZNd.jpg?width=437&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942040470735978596/FLGI-F9VgAEUZNd.jpg?width=437&height=625" >
   </a>
   <span class="caption"><a href="https://twitter.com/owldollarts" target="_blank">@owldollarts</a></span>
</div>

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

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942039325422534697/FLPQFtkXsAYdbpO.png?width=1440&height=540" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942039325422534697/FLPQFtkXsAYdbpO.png?width=1440&height=540" >
   </a>
   <span class="caption"><a href="https://twitter.com/anafabulaic" target="_blank">@anafabulaic</a></span>
</div>

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

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

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

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

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

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

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

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

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

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

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

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942037294137868338/FK-fAfMXoAEZwjE.png?width=446&height=624" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942037294137868338/FK-fAfMXoAEZwjE.png?width=446&height=624" >
   </a>
   <span class="caption"><a href="https://twitter.com/jrgdrawing" target="_blank">@jrgdrawing</a></span>
</div>

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

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

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

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

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942036568326168596/FK1-O5lWUAASOie.png?width=1271&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942036568326168596/FK1-O5lWUAASOie.png?width=1271&height=625" >
   </a>
   <span class="caption"><a href="https://artreyus.com/" target="_blank">@Artreyusdraws</a></span>
</div>

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

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

<div class="imagebox">
   <a href="https://twitter.com/zerstoerer/status/1491206438118891524" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942036045334204466/CqXzng4W.png" >
   </a>
   <span class="caption"><a href="https://twitter.com/zerstoerer" target="_blank">@zerstoerer</a></span>
</div>

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

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

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

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

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

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

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

<div class="imagebox">
   <a href="https://media.discordapp.net/attachments/938556046971142197/942035203516424192/T14isxJQ.png?width=375&height=625" target="_blank">
   <img src="https://media.discordapp.net/attachments/938556046971142197/942035203516424192/T14isxJQ.png?width=375&height=625" >
   </a>
   <span class="caption"><a href="https://twitter.com/SepticRat" target="_blank">@SepticRat</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 3

Module Styles

Inline Styles

Includes

CSS Classes

Page Source