Archive of Our Own

I wanna be the very best
Like no one ever was
To catch them is my real test
To train them is my cause
I will travel across the land
Searching far and wide
Each Pokémon to understand
The power that’s inside

This is a test/sample work — full code at the end.

Tip: check out how it looks with the Creator’s Style off!

Choose your Poké Ball:

From Bulbapedia.

How-To & Recommendations:

Most effects and filters work by hovering and/or clicking, depending on your device. 

1. <div class="gallery"> is the base for anything to work. After gallery, add the -effectname of your preference. Live examples below the cut.

2. Effects that target the same property usually don’t work so well together:

position: -lift and -drop and -pop and -shrink

filter: -bw and -vivid and -sepia

shadow: -undershadow and -fullshadow

Ideally, you should choose only one from each category. Mix and match at will. 

3. PNG images with a transparent background might look a bit weird with any of the shadow effects. They also most likely won’t appear to have the rounded corners, although they will be there.

4. The position effects (how high it lifts, how low it drops, how big it pops, how small it shrinks) all vary between screen size and content amount.

-lift and -drop work fine both on desktops and cellphones. -pop and -shrink, on the other hand, depends a lot.

Obviously, each effect works best in different sizes, different amounts, and different values. I settled on values that look good enough considering the basic possibilities. If you really want the -pop and/or -shrink effects, I recommend spending some time trying on the values that work best for you and your purposes.

5. For any type of gallery, it’s better to use tables instead of just placing the images next to each other. This helps the work not look weird or even broken without the Work Skin or with the Creator’s Style turned off. 

It’s a lot easier to make a table by making the shape on Sheets or Excel first. Select the number of columns* and rows you want, and simply copy and paste it into the Rich Text Editor.

*The number of columns depends on the width and content of the images. For cellphones, I recommend from 2 to 8 columns. For desktops: at least 3 columns.

If you want or need the link underline to show up, just remove the very last section of the code. Everything is easily editable in the CSS. Feel free to play with it and edit it to your liking.

Base Gallery:

<div class="gallery">

Lift Effect + Under Shadow:

<div class="gallery-lift-undershadow">

Drop Effect + Under Shadow:

<div class="gallery-drop-undershadow">

<div class="gallery-pop-fullshadow">

 

Shrink Effect + Full Shadow:

<div class="gallery-shrink-fullshadow">

 

Black and White Filter:

<div class="gallery-bw">

 

Sepia Filter:

<div class="gallery-sepia">

Vivid Filter:

<div class="gallery-vivid">

Blur Filter:

<div class="gallery-blur">

Full Work Skin CSS:

For reference:

#workskin div[class*="gallery"] img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  position: relative;
  transform-origin: center center;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

#workskin div[class*="pop"] img:hover,
#workskin div[class*="pop"] img:active {
  transform: scale(1.03);
  z-index: 10;
}

#workskin div[class*="lift"] img:hover {
  transform: translateY(-10px);
  transform-origin: bottom center;
  z-index: 10;
}

#workskin div[class*="drop"] img:hover {
  transform: translateY(10px);
  transform-origin: top center;
  z-index: 10;
}

#workskin div[class*="undershadow"] img:hover {
  box-shadow: 0 12px 10px rgba(0, 0, 0, 0.75),
              0 -6px 5px rgba(0, 0, 0, 0.35);
  z-index: 10;
}

#workskin div[class*="fullshadow"] img:hover {
  box-shadow: 0 0 12px 6px rgba(0, 0, 0, 0.75);
  z-index: 10;
}

#workskin div[class*="bw"] img {
  filter: grayscale(1);
}

#workskin div[class*="bw"] img:hover {
  filter: grayscale(0);
}

#workskin div[class*="blur"] img {
  filter: blur(2px);

overflow: hidden;
}

#workskin div[class*="blur"] img:hover {
  filter: blur(0);

overflow: hidden;
}

#workskin div[class*="vivid"] img:hover,
#workskin div[class*="vivid"] img:active {
  filter: saturate(1.3) grayscale(0);
}

#workskin div[class*="sepia"] img {
  filter: sepia(0.8);
}

#workskin div[class*="sepia"] img:hover {
  filter: sepia(0);
}

#workskin div[class*="shrink"] img:hover,
#workskin div[class*="shrink"] img:active {
  transform: scale(0.97);
  z-index: 10;
}

#workskin table {
  border-collapse: separate;
  border-spacing: 0 1px;
}



#workskin div[class*="gallery"] a,
#workskin div[class*="gallery"] a:link,
#workskin div[class*="gallery"] a:visited,
#workskin div[class*="gallery"] a:hover,
#workskin div[class*="gallery"] a:active {
  text-decoration: none !important;
  border-bottom: none !important;
  display: inline-block;
}

Works With This Style/Skin:

🔗   One Artwork to Rule Them All