Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="background"></div>
<div id="container">
  <ul id="filters">
    <li class="list-bg"></li>
    <li class="title top">Filters</li>
    <li>
      <div id="list-of-filters">
        <ul id="characters">
          <li class="title">By Character</li>
          <li data-filter="amethyst">Amethyst</li>
          <li data-filter="connie">Connie</li>
          <li data-filter="jasper">Jasper</li>
          <li data-filter="lapis">Lapis</li>
          <li data-filter="pearl">Pearl</li>
          <li data-filter="peridot">Peridot</li>
          <li data-filter="rose_quartz">Rose Quartz</li>
          <li data-filter="ruby">Ruby</li>
          <li data-filter="sapphire">Sapphire</li>
          <li data-filter="steven">Steven</li>
          <li data-filter="clear">Clear All Filters</li>
        </ul>
        <ul id="type">
          <li class="title">By Type</li>
          <li data-filter="base">Base Gem</li>
          <li data-filter="fusion">Fusion Gem</li>
          <li data-filter="clear">Clear All Filters</li>
        </ul>
      </div>
    </li>
  </ul>
  <div id="all-characters">
    <ul id="entities">
      <li class="thumbnail ruby sapphire amethyst pearl fusion" id="alexandrite">
        <div>
          <span class="front">
          <img src="http://vignette2.wikia.nocookie.net/steven-universe/images/0/0a/Alexandrite_Current_Regen_by_Lenhi.png/revision/latest/scale-to-width-down/270?cb=20160516040356"/>
          <a class="gotoinfo">i</a>
        </span>
          <span class="back">
          <span class="name"><strong>Name:</strong> Alexandrite</span>
          <span class="gender"><strong>Gender:</strong> N/A</span>
          <span class="race"><strong>Race:</strong> Gem</span>
          <span class="weapon"><strong>Weapon(s):</strong> Energy Bow, Flail, War Hammer</span>
          <span class="first_appearance"><strong>First Appearance:</strong> "Fusion Cuisine" (S01E32)</span>
          <span class="tags"><strong>Tags:</strong> 
            <span class="ruby tag">ruby</span>
            <span class="sapphire tag">sapphire</span>
            <span class="amethyst tag">amethyst</span>
            <span class="pearl tag">pearl</span>
            <span class="fusion tag">fusion</span>
          </span>
          <a href="" class="gotoback">&#8617;</a>
        </span>
        </div>
      </li>
      <li class="thumbnail amethyst base">
        <div>
          <span class="front">
          <img src="http://vignette3.wikia.nocookie.net/steven-universe/images/7/70/Jfek.png/revision/latest/scale-to-width-down/270?cb=20151130211342"/>
          <a href="" class="gotoinfo">i</a>
        </span>
          <span class="back">
          <span class="name"><strong>Name:</strong> Amethyst</span>
          <span class="gender"><strong>Gender:</strong> N/A</span>
          <span class="race"><strong>Race:</strong> Gem</span>
          <span class="weapon"><strong>Weapon(s):</strong> Whip</span>
          <span class="first_appearance"><strong>First Appearance:</strong> "Gem Glow" (S01E01)</span>
          <span class="tags"><strong>Tags:</strong> 
            <span class="amethyst tag">amethyst</span>
            <span class="base tag">base</span>
          </span>
          <a href="" class="gotoback">&#8617;</a>
        </span>
        </div>
      </li>
      <li class="thumbnail connie base">
        <div>
          <span class="front">
          <img src="http://vignette4.wikia.nocookie.net/steven-universe/images/1/12/ConnieNewIntro.png/revision/latest/scale-to-width-down/270?cb=20150927172919"/>
          <a href="" class="gotoinfo">i</a>
        </span>
          <span class="back">
          <span class="name"><strong>Name:</strong> Connie</span>
          <span class="gender"><strong>Gender:</strong> Female</span>
          <span class="race"><strong>Race:</strong> Human</span>
          <span class="weapon"><strong>Weapon(s):</strong> Rose's Sword</span>
          <span class="first_appearance"><strong>First Appearance:</strong> "Bubble Buddies" (S01E07)</span>
          <span class="tags"><strong>Tags:</strong> 
            <span class="connie tag">connie</span>
            <span class="base tag">base</span>
          </span>
          <a href="" class="gotoback">&#8617;</a>
        </span>
        </div>
      </li>
      <li class="thumbnail ruby sapphire fusion" id="garnet">
        <div>
          <span class="front">
          <img src="http://vignette1.wikia.nocookie.net/steven-universe/images/1/16/GarnetByKmes.png/revision/latest/scale-to-width-down/270?cb=20160123075715"/>
          <a href="" class="gotoinfo">i</a>
        </span>
          <span class="back">
          <span class="name"><strong>Name:</strong> Garnet</span>
          <span class="gender"><strong>Gender:</strong> N/A</span>
          <span class="race"><strong>Race:</strong> Gem</span>
          <span class="weapon"><strong>Weapon(s):</strong> Gauntlets</span>
          <span class="first_appearance"><strong>First Appearance:</strong> "Gem Glow" (S01E01)</span>
          <span class="tags"><strong>Tags:</strong> 
            <span class="ruby tag">ruby</span>
            <span class="sapphire tag">sapphire</span>
            <span class="fusion tag">fusion</span>
          </span>
          <a href="" class="gotoback">&#8617;</a>
        </span>
        </div>
      </li>
      <li class="thumbnail jasper base" id="jasper">
        <div>
          <span class="front">
          <img src="http://vignette1.wikia.nocookie.net/steven-universe/images/6/65/HelmetJasperDP.png/revision/latest/scale-to-width-down/270?cb=20160513162455"/>
          <a href="" class="gotoinfo">i</a>
        </span>
          <span class="back">
          <span class="name"><strong>Name:</strong> Jasper</span>
          <span class="gender"><strong>Gender:</strong> N/A</span>
          <span class="race"><strong>Race:</strong> Gem</span>
          <span class="weapon"><strong>Weapon(s):</strong> Crash Helmet</span>
          <span class="first_appearance"><strong>First Appearance:</strong> "The Return" (S01E51)</span>
          <span class="tags"><strong>Tags:</strong> 
            <span class="jasper tag">jasper</span>
            <span class="base tag">base</span>
          </span>
          <a href="" class="gotoback">&#8617;</a>
        </span>
        </div>
      </li>
      <li class="thumbnail lapis base" id="lapis">
        <div>
          <span class="front">
          <img src="http://vignette1.wikia.nocookie.net/steven-universe/images/a/a2/LookBeckyItsLapis.png/revision/latest/scale-to-width-down/270?cb=20160514223737"/>
          <a href="" class="gotoinfo">i</a>
        </span>
          <span class="back">
          <span class="name"><strong>Name:</strong> Lapis Lazuli</span>
          <span class="gender"><strong>Gender:</strong> N/A</span>
          <span class="race"><strong>Race:</strong> Gem</span>
          <span class="weapon"><strong>Weapon(s):</strong> Hydrokinesis</span>
          <span class="first_appearance"><strong>First Appearance:</strong> "Mirror Gem" (S01E25)</span>
          <span class="tags"><strong>Tags:</strong> 
            <span class="lapis tag">lapis</span>
            <span class="base tag">base</span>
          </span>
          <a href="" class="gotoback">&#8617;</a>
        </span>
        </div>
      </li>
      <li class="thumbnail jasper lapis fusion" id="malachite">
        <div>
          <span class="front">
          <img src="http://vignette2.wikia.nocookie.net/steven-universe/images/6/62/Malachite_Lenhi.png/revision/latest/scale-to-width-down/270?cb=20160517194453"/>
          <a href="" class="gotoinfo">i</a>
        </span>
          <span class="back">
          <span class="name"><strong>Name:</strong> Malachite</span>
          <span class="gender"><strong>Gender:</strong> N/A</span>
          <span class="race"><strong>Race:</strong> Gem</span>
          <span class="weapon"><strong>Weapon(s):</strong> Hydrokinesis, Crash Helmet</span>
          <span class="first_appearance"><strong>First Appearance:</strong> "Jail Break" (S01E52)</span>
          <span class="tags"><strong>Tags:</strong> 
            <span class="jasper tag">jasper</span>
            <span class="lapis tag">lapis</span>
            <span class="fusion tag">fusion</span>
          </span>
          <a href="" class="gotoback">&#8617;</a>
        </span>
        </div>
      </li>
      <li class="thumbnail pearl amethyst fusion" id="opal">
        <div>
          <span class="front">
          <img src="http://vignette1.wikia.nocookie.net/steven-universe/images/b/b3/Opal_Gen_3_by_Lenhi.png/revision/latest/scale-to-width-down/270?cb=20160507235259"/>
          <a href="" class="gotoinfo">i</a>
        </span>
          <span class="back">
          <span class="name"><strong>Name:</strong> Opal</span>
          <span class="gender"><strong>Gender:</strong> N/A</span>
          <span class="race"><strong>Race:</strong> Gem</span>
          <span class="weapon"><strong>Weapon(s):</strong> Bow and arrow</span>
          <span class="first_appearance"><strong>First Appearance:</strong> "Giant Woman" (S01E12)</span>
          <span class="tags"><strong>Tags:</strong> 
            <span class="amethyst tag">amethyst</span>
            <span class="pearl tag">pearl</span>
            <span class="fusion tag">fusion</span>
          </span>
          <a href="" class="gotoback">&#8617;</a>
        </span>
        </div>
      </li>
      <li class="thumbnail pearl base" id="pearl">
        <div>
          <span class="front">
          <img src="http://vignette4.wikia.nocookie.net/steven-universe/images/8/8c/Current_Pearl_Request.png/revision/latest/scale-to-width-down/270?cb=20151119210849"/>
          <a href="" class="gotoinfo">i</a>
        </span>
          <span class="back">
          <span class="name"><strong>Name:</strong> Pearl</span>
          <span class="gender"><strong>Gender:</strong> N/A</span>
          <span class="race"><strong>Race:</strong> Gem</span>
          <span class="weapon"><strong>Weapon(s):</strong> Spear</span>
          <span class="first_appearance"><strong>First Appearance:</strong> "Gem Glow" (S01E01)</span>
          <span class="tags"><strong>Tags:</strong> 
            <span class="pearl tag">pearl</span>
            <span class="base tag">base</span>
          </span>
          <a href="" class="gotoback">&#8617;</a>
        </span>
        </div>
      </li>
      <li class="thumbnail peridot base" id="peridot">
        <div>
          <span class="front">
          <img src="http://vignette1.wikia.nocookie.net/steven-universe/images/0/03/Smol_Peridot_by_Lenhi.png/revision/latest/scale-to-width-down/262?cb=20151223054206"/>
          <a href="" class="gotoinfo">i</a>
        </span>
          <span class="back">
          <span class="name"><strong>Name:</strong> Peridot</span>
          <span class="gender"><strong>Gender:</strong> N/A</span>
          <span class="race"><strong>Race:</strong> Gem</span>
          <span class="weapon"><strong>Weapon(s):</strong> Modern Gem Technology </span>
          <span class="first_appearance"><strong>First Appearance:</strong> "Warp Tour" (S01E36)</span>
          <span class="tags"><strong>Tags:</strong> 
            <span class="peridot tag">peridot</span>
            <span class="base tag">base</span>
          </span>
          <a href="" class="gotoback">&#8617;</a>
        </span>
        </div>
      </li>
      <li class="thumbnail rose_quartz pearl fusion" id="rainbow_quartz">
        <div>
          <span class="front">
          <img src="http://vignette1.wikia.nocookie.net/steven-universe/images/f/f3/Rainbow_Quartz_by_Lenhi.png/revision/latest/scale-to-width-down/270?cb=20160323044505"/>
          <a href="" class="gotoinfo">i</a>
        </span>
          <span class="back">
          <span class="name"><strong>Name:</strong> Rainbow Quartz</span>
          <span class="gender"><strong>Gender:</strong> N/A</span>
          <span class="race"><strong>Race:</strong> Gem</span>
          <span class="weapon"><strong>Weapon(s):</strong> </span>
          <span class="first_appearance"><strong>First Appearance:</strong> "We Need To Talk" (S02E09)</span>
          <span class="tags"><strong>Tags:</strong> 
            <span class="rose_quartz tag">rose-quartz</span>
            <span class="pearl tag">pearl</span>
            <span class="fusion tag">fusion</span>
          </span>
          <a href="" class="gotoback">&#8617;</a>
        </span>
        </div>
      </li>
      <li class="thumbnail rose_quartz base" id="rose_quartz">
        <div>
          <span class="front">
          <img src="http://vignette2.wikia.nocookie.net/steven-universe/images/f/fa/Rose_Quartz_-_With_Weapon.png/revision/latest/scale-to-width-down/270?cb=20150709030436"/>
          <a href="" class="gotoinfo">i</a>
        </span>
          <span class="back">
          <span class="name"><strong>Name:</strong> Rose Quartz</span>
          <span class="gender"><strong>Gender:</strong> N/A</span>
          <span class="race"><strong>Race:</strong> Gem</span>
          <span class="weapon"><strong>Weapon(s):</strong> Shield, Sword, Laser Light Cannon</span>
          <span class="first_appearance"><strong>First Appearance:</strong> "Laser Light Cannon" (S01E02)</span>
          <span class="tags"><strong>Tags:</strong> 
            <span class="rose_quartz tag">rose-quartz</span>
            <span class="base tag">base</span>
          </span>
          <a href="" class="gotoback">&#8617;</a>
        </span>
        </div>
      </li>
      <li class="thumbnail ruby base" id="ruby">
        <div>
          <span class="front">
          <img src="http://vignette4.wikia.nocookie.net/steven-universe/images/f/f6/Ruby_-_Weaponized.png/revision/latest/scale-to-width-down/270?cb=20160606051342"/>
          <a href="" class="gotoinfo">i</a>
        </span>
          <span class="back">
          <span class="name"><strong>Name:</strong> Ruby</span>
          <span class="gender"><strong>Gender:</strong> N/A</span>
          <span class="race"><strong>Race:</strong> Gem</span>
          <span class="weapon"><strong>Weapon(s):</strong> Gauntlets</span>
          <span class="first_appearance"><strong>First Appearance:</strong> "Jail Break" (S01E52)</span>
          <span class="tags"><strong>Tags:</strong> 
            <span class="ruby tag">ruby</span>
            <span class="base tag">base</span>
          </span>
          <a href="" class="gotoback">&#8617;</a>
        </span>
        </div>
      </li>
      <li class="thumbnail sapphire base" id="sapphire">
        <div>
          <span class="front">
          <img src="http://vignette3.wikia.nocookie.net/steven-universe/images/6/64/Dan_Sapphy_ur_Freezies_with_Gem.png/revision/latest/scale-to-width-down/270?cb=20151106214440"/>
          <a href="" class="gotoinfo">i</a>
        </span>
          <span class="back">
          <span class="name"><strong>Name:</strong> Sapphire</span>
          <span class="gender"><strong>Gender:</strong> N/A</span>
          <span class="race"><strong>Race:</strong> Gem</span>
          <span class="weapon"><strong>Weapon(s):</strong> N/A</span>
          <span class="first_appearance"><strong>First Appearance:</strong> "Jail Break" (S01E52)</span>
          <span class="tags"><strong>Tags:</strong> 
            <span class="sapphire tag">sapphire</span>
            <span class="base tag">base</span>
          </span>
          <a href="" class="gotoback">&#8617;</a>
        </span>
        </div>
      </li>
      <li class="thumbnail sapphire ruby pearl fusion" id="sardonyx">
        <div>
          <span class="front">
          <img src="http://vignette2.wikia.nocookie.net/steven-universe/images/b/b7/Sardonyx_by_Lenhi.png/revision/latest/scale-to-width-down/270?cb=20160407064424"/>
          <a href="" class="gotoinfo">i</a>
        </span>
          <span class="back">
          <span class="name"><strong>Name:</strong> Sardonyx</span>
          <span class="gender"><strong>Gender:</strong> N/A</span>
          <span class="race"><strong>Race:</strong> Gem</span>
          <span class="weapon"><strong>Weapon(s):</strong> War Hammer</span>
          <span class="first_appearance"><strong>First Appearance:</strong> "Cry For Help" (S02E11)</span>
          <span class="tags"><strong>Tags:</strong> 
            <span class="sapphire tag">sapphire</span>
            <span class="ruby tag">ruby</span>
            <span class="pearl tag">pearl</span>
            <span class="fusion tag">fusion</span>
          </span>
          <a href="" class="gotoback">&#8617;</a>
        </span>
        </div>
      </li>
      <li class="thumbnail steven base" id="steven">
        <div>
          <span class="front">
          <img src="http://vignette3.wikia.nocookie.net/steven-universe/images/f/f0/Steven_Shield_WD.png/revision/latest/scale-to-width-down/270?cb=20160406110631"/>
          <a href="" class="gotoinfo">i</a>
        </span>
          <span class="back">
          <span class="name"><strong>Name:</strong> Steven</span>
          <span class="gender"><strong>Gender:</strong> Male</span>
          <span class="race"><strong>Race:</strong> Gem, Human</span>
          <span class="weapon"><strong>Weapon(s):</strong> Shield</span>
          <span class="first_appearance"><strong>First Appearance:</strong> "Gem Glow" (S01E01)</span>
          <span class="tags"><strong>Tags:</strong> 
            <span class="steven tag">steven</span>
            <span class="base tag">base</span>
          </span>
          <a href="" class="gotoback">&#8617;</a>
        </span>
        </div>
      </li>
      <li class="thumbnail steven connie fusion" id="stevonnie">
        <div>
          <span class="front">
          <img src="http://vignette2.wikia.nocookie.net/steven-universe/images/e/eb/Stevonnie_day.png/revision/latest/scale-to-width-down/270?cb=20151213155017"/>
          <a href="" class="gotoinfo">i</a>
        </span>
          <span class="back">
          <span class="name"><strong>Name:</strong> Stevonnie</span>
          <span class="gender"><strong>Gender:</strong> N/A</span>
          <span class="race"><strong>Race:</strong> Gem, Human</span>
          <span class="weapon"><strong>Weapon(s):</strong> N/A</span>
          <span class="first_appearance"><strong>First Appearance:</strong> "Alone Together" (S01E37)</span>
          <span class="tags"><strong>Tags:</strong> 
            <span class="connie tag">connie</span>
            <span class="fusion tag">fusion</span>
            <span class="steven tag">steven</span>
          </span>
          <a href="" class="gotoback">&#8617;</a>
        </span>
        </div>
      </li>
      <li class="thumbnail sapphire ruby amethyst fusion" id="sugilite">
        <div>
          <span class="front">
          <img src="http://vignette1.wikia.nocookie.net/steven-universe/images/d/d2/Sugilite_-_Cry_for_Help_with_Flail.png/revision/latest/scale-to-width-down/270?cb=20151213211659"/>
          <a href="" class="gotoinfo">i</a>
        </span>
          <span class="back">
          <span class="name"><strong>Name:</strong> Sugilite</span>
          <span class="gender"><strong>Gender:</strong> N/A</span>
          <span class="race"><strong>Race:</strong> Gem</span>
          <span class="weapon"><strong>Weapon(s):</strong> Flail</span>
          <span class="first_appearance"><strong>First Appearance:</strong> "Coach Steven" (S01E20)</span>
          <span class="tags"><strong>Tags:</strong> 
            <span class="fusion tag">fusion</span>
            <span class="ruby tag">ruby</span>
            <span class="sapphire tag">sapphire</span>
            <span class="amethyst tag">amethyst</span>
          </span>
        </span>
        </div>
      </li>
    </ul>
  </div>
</div>
              
            
!

CSS

              
                @import 'https://fonts.googleapis.com/css?family=Open+Sans:300,700|Roboto+Slab';
//Modified version of this palette: http://www.color-hex.com/color-palette/15686
$peach: #ffb1a1;
$pink: #ff5e6d;
$yellow: #ffde3f;
$white: #ffffff;
$navy: #00284e;
$blue: #00B2EE;
* {
  outline: 0;
}
@each $colorname, $colorvalue in (amethyst, #B898CA), (connie, #B1503F), (jasper, #F89E57), (lapis, #216CD8), (pearl, #FCCCB1), (peridot, #98FF72), (rose_quartz, #FDAECB), (ruby, #D93B64), (sapphire, #7298EC), (steven, #201000){
  .tag.#{$colorname}{
    color: #{$colorvalue};
  }
}
ul {
  list-style-image: none;
  margin: 0;
  padding: 0;
  height: 100%;
  &#filters {
    overflow: hidden;
    color: $white;
    height: 100%;
    width: 20%;
    max-width: 200px;
    position: relative;
    float: left;
    li {
      font-size: 0.9em;
      padding: 0.25em;
      z-index: 2;
      &.list-bg {
        background: linear-gradient(90deg, darken($navy, 40%) 25%, transparent 100%);
        mix-blend-mode: overlay;
        background-size: cover;
        position: absolute;
        top: 0;
        left: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
      }
      &.title {
        font-family: 'Roboto Slab';
        &.top {
          font-size: 1em;
        }
        & ~ li {
          font-family: 'Open Sans';
          position: relative;
          & ul li:not(.title) {
            &:before {
              content: '';
              display: block;
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              opacity: 0;
              z-index: -1;
              transition: 0.25s all;
            }
            &:hover {
              &:before {
                background-image: linear-gradient(90deg, $blue 25%, transparent 100%);
                opacity: 0.3;
                cursor: pointer;
              }
            }
            &.active {
              &:before {
                background-image: linear-gradient(90deg, mix($peach, $blue, 50%) 25%, transparent 100%);
                opacity: 0.75;
                transition: all 0.2s;
              }
              &:hover:before {
                background-image: linear-gradient(90deg, mix($peach, $blue, 50%) 25%, transparent 100%);
                opacity: 1;
              }
            }
          }
        }
      }
      &#list-of-filters {
        height: 100%;
        position: relative;
        overflow-y: auto;
        ul {
          max-height: 100%;
        }
      }
    }
  }
}
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  overflow-x: hidden;
}
#background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(https://s3.amazonaws.com/codepen-imgs/Underwater_Temple_Ceiling.png);
  &:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: $navy;
    mix-blend-mode: overlay;
    opacity: 0.75;
  }
}
#all-characters {
  float: right;
  width: 80%;
  max-height: 100%;
  overflow-y: auto;
  #entities > li {
    width: 31%;
    border: 3px solid $navy;
    float: left;
    border-radius: 5px;
    overflow: hidden;
    background: rgba(darken($navy, 15%), 0.75);
    color: $white;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8em;
    &.thumbnail {
      margin-bottom: 5px;
    }
    div {
      position: relative;
      .front, .back {
        backface-visibility: hidden;
        .gotoinfo, .gotoback {
          display: inline-block;
          position: absolute;
          border-width: 2px;
          border-style: solid;
          border-radius: 50%;
          height: 1.6em;
          width: 1.6em;
          text-align: center;
          text-decoration: none;
          transition: 0.15s all;
          &:hover {
            cursor: pointer;
          }
        }
      }
      .front {
        display: block;
        width: 100%;
        text-align: center;
        .gotoinfo {
          bottom: 1em;
          right: 1.25em;
          line-height: 1.6em;
          border-color: $white;
          color: $white;
          &:hover {
            background: $white;
            color: $navy;
          }
        }
      }
      .back {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: rotate3d(0,1,0,180deg);
        padding: 1.5em 1.75em;
        background: $white;
        color: $navy;
        .gotoback {
          line-height: 1.8em;
          bottom: 4em;
          right: 4.5em;
          border-color: $navy;
          color: $navy;
          &:hover {
            background: $navy;
            color: $white;
          }
          
        }
        span {
          display: block;
          margin: 0.5em 0;
          &.tag {
            display: inline-block;
            &.fusion {
              background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
              background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
              -webkit-background-clip: text;
              background-clip: text;
              font-weight: 700;
              -webkit-text-stroke-width: 1px;
              -webkit-text-stroke-color: black;
              -webkit-text-fill-color: transparent;
            }
            &:after {
              content: ', ';
              color: $navy;
            }
            &:last-child:after {
              content: '';
            }
            &:hover {
              cursor: pointer;
            }
          }
        }
      }
      .show {
        transform: rotate3d(0,1,0,360deg);
        transition: all 0.3s;
      }
      .hide {
        transform: rotate3d(0,1,0,180deg);
        transition: all 0.3s;
      }
    }
  }
}
#container {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
              
            
!

JS

              
                var iso = new Isotope( '#entities', {
  itemSelector: '.thumbnail',
  percentPosition: true,
  masonry: {
    // use outer width of grid-sizer for columnWidth
    columnWidth: '#entities .thumbnail',
    gutter: 5
  }
});

window.onload = function(){
  var info_btns = document.querySelectorAll('.gotoinfo');
  var filters = '';
  for (var i = 0; i<info_btns.length; i++){
    info_btns[i].addEventListener('click', function(e){
      e.preventDefault();
      var thumb = e.target.parentNode;
      var back = thumb.nextSibling.nextSibling;
      if (!thumb.className.match(/show/gi)){
        thumb.className = thumb.className + ' hide';
        back.className = back.className + ' show'; 
      } else {
        thumb.className = thumb.className.replace(/show/gi, 'hide');
        back.className = back.className.replace(/hide/gi, 'show');
      }
    });
  }
  var show_front_btns = document.querySelectorAll('.gotoback');
  for (var i = 0; i<show_front_btns.length; i++){
    show_front_btns[i].addEventListener('click', function(e){
      e.preventDefault();
      var thumb = e.target.parentNode;
      var back = thumb.previousSibling.previousSibling;
      thumb.className = thumb.className.replace(/show/gi, 'hide');
      back.className = back.className.replace(/hide/gi, 'show');
    });
  }
  var filter_links = document.querySelectorAll('#characters > li, #type > li');
  for (var i = 0; i<filter_links.length; i++){  filter_links[i].addEventListener('click',function(e){
    e.preventDefault();
    var character = e.target.dataset.filter;
    if(character === 'clear') {
      if(e.target.parentNode.id === 'characters'){
        var active_links = document.querySelectorAll('#characters .active');
      } else if (e.target.parentNode.id==="type"){
        var active_links = document.querySelectorAll('#type .active');
      } else {
        var active_links = '';
      }
      for(var j = 0; j<active_links.length; j++){
        filters = filters.replace('.' + active_links[j].dataset.filter, '');
        active_links[j].className = '';
      }
      active_links = document.querySelectorAll('#filters .active');
      for( var j = 0; i<active_links.length; j++){
        filters += '.'+active_links[j].dataset.filter;
        iso.arrange({filter: function(){
          return filters
        }()});
      }
    } else if(filters.indexOf(character)<=0){
        if (filters.length > 0){
          filters += '.' + character;
        } else {
          filters = '.' + character;
        }
        e.target.className = e.target.className + ' active';
      } else {
        e.target.className = e.target.className.replace(/active/gi, '');
        if (filters.length > 0){
          filters = filters.replace('.' + character, '');
        } else {
          filters = '';
        }
      }
    iso.arrange({filter: function(){
      return filters
    }()});
    });
  }
  var tags = document.querySelectorAll('.tags > .tag');
  for (var i = 0; i<tags.length; i++){
    tags[i].addEventListener('click', function(e){
      var active_links = document.querySelectorAll('#filters .active');
      if(active_links.length > 0){
        for (var j = 0; j<active_links.length; j++){
          active_links[j].className = '';
        } 
      }
      var tag_value = e.target.innerHTML;
      var tag = '.' + tag_value;
      document.querySelector('#filters [data-filter='+ tag_value + ']').className = 'active';
      filters = tag;
      iso.arrange({filter: function(){
        return tag
      }()});
    });
  }
}
              
            
!
999px

Console