<div id="container" class="clearfix">
  <img class="floaty-left" src="https://placekitten.com/100/200">
  <img class="floaty-left" src="https://placekitten.com/100/100">
  <img class="floaty-left" src="https://placekitten.com/160/200">
  <img class="floaty-left" src="https://placekitten.com/100/120">
  <img class="floaty-left" src="https://placekitten.com/120/180">
  <div class="glitter  bottom">(⊃｡•́‿•̀｡)⊃━☆ﾟ.*･｡ﾟ~~☆’.･.･:★’.･.･:☆’.･.･:★</div>
  <div class="glitter  top">(⊃｡•́‿•̀｡)⊃━☆ﾟ.*･｡ﾟ~~☆’.･.･:★’.･.･:☆’.･.･:★</div>
</div>
<div style="text-align: center; clear:both;">Try hover!</div>

#container {
  max-width: 600px;
  margin: 20px auto;
  padding: 0;
  background: linear-gradient(45deg, white, #444);
  min-height: 100px;
  position: relative;
  
  &.clearfix {
    overflow: hidden;
    &:hover {
      overflow: initial;
    }
  }
}

.floaty-left {
  float: left;
  margin: 2px;
  
  // these get clipped!
  box-shadow: 
    4px 0 6px violet, 
    0 4px 6px teal,
    -4px 0 6px yellow,
    0 -4px 6px red;
}

// this is all extra, in every sense of the word

.glitter {
  position: absolute;
  font-size: 1em;
  line-height: 1em;
  height: 1em;
  text-align: center;
  font-weight: bold;
  
  &.top {
    left: 0;
    right: 0;
    top: -0.5em;
  }
  &.bottom {
    left: 0;
    right: 0;
    bottom: -0.5em;
  }
  
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  
  background-image: linear-gradient(85deg,
    white,
    grey,
    darkgrey,
    grey,
    darkgrey,
    gold,
    black,
    darkgrey,
    white,
    grey,
    darkgrey,
    grey,
    darkgrey,
    gold,
    black,
    darkgrey,
    white
  );
  
  background-position-x: 0;
  background-position-y: 0;
  background-size: 200% 100%;
  
  animation-name: glitter-sparkle;
  animation-duration: 500ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  
  white-space: pre;
}

@keyframes glitter-sparkle {
  0% { background-position-x: 0 }
  100% { background-position-x: 100% }
}


@mixin sparkle-gradient($direction: null, $color-stops...) {
  $grads: $color-stops;
  @each $stop in $color-stops {
    $grads: append($grads, $stop);
  }
  $grads: append($grads, nth(nth($grads, 1), 1));
  
  @if $direction == null {
    $direction: 75deg;
    @media only screen and  (max-width : 800px) {
      $direction: 80deg;
    }
    @media only screen and  (max-width : 500px) {
      $direction: 90deg;
    }
  }
  
  background-image: linear-gradient($direction, $grads);
}