Contents

.hover-tile-outer {
  $base-border-color: gainsboro !default;
  $base-line-height: 1.5em !default;
  $medium-screen: 40em !default;
  $hover-tile-height: 10em;
  $base-spacing: 1.5em;

  background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png");
  background-color: beige;
  background-position: top;
  background-size: cover;
  border: 1px solid $base-border-color;
  cursor: pointer;
  height: $hover-tile-height;
  margin-bottom: $base-line-height;

  @include media($medium-screen) {
    width: 40%;
  }

  .hover-tile-container {
    height: $hover-tile-height;
    overflow: hidden;
  }

  .hover-tile-container:hover > .hover-tile {
    transform: translate(0, -100%);
  }

  .hover-tile {
    background: inherit;
    color: white;
    height: inherit;
    overflow: hidden;
    padding: $base-spacing;
    transition: all 0.2s ease-in-out;
  }

  .hover-tile-hidden {
    background: transparentize(#000, 0.5);

    p {
      color: transparentize(#fff, 0.3);
      line-height: $base-line-height;
    }

    h4 {
      margin: 0 0 0.5em 0;
    }
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
refills-0.2.0	source/stylesheets/refills/_hover-tile-animation.scss