child-behind-parent.scss

/**
 * @mixin child-behind-parent()
 *
 * Moves a child img behind it's a parent. Apply to parent div. Markup: div > a > img
 * Useful for putting a hover image on the a tag wrapping an image
 *
 */
@mixin child-overlay($image){
  position: relative;
  z-index: 1;
  a{
    display: block;
    position: relative;
    @include background(image-url("#{$image}") center no-repeat);

    &:hover{
      @include background-size(16%); //possibly use transform instead
    }

    img{
      position: relative;
      z-index: -1;
    }
  }
}