Contents

.hover-tile-outer {
  $hover-tile-height: 10em;

  background-size: cover;
  background-position: bottom;
  background: url("/images/mountains.png");
  background-color: $base-accent-color;
  border: 1px solid $base-border-color;
  height: $hover-tile-height;
  margin-bottom: $base-line-height;
  cursor: pointer;

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

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

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

  .hover-tile {
    @include transition(all, .2s ease-in-out);
    background: inherit;
    color: white;
    height: inherit;
    padding: 1em 1.5em;
  }

  .hover-tile-visible {
    color: transparentize(white, .3);
    font-size: 2em;
    font-weight: 200;
    padding-top: 1.5em;
    text-align: center;
  }

  .hover-tile-hidden {
    background: transparentize(black, .5);
    h4 {
      margin-bottom: .5em;
    }
    p {
      color: transparentize(white, .3);
    }
  }
}

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
nesta-contentfocus-extensions-0.0.3	assets/stylesheets/contentfocus/_hover_tile.scss
nesta-contentfocus-extensions-0.0.2	assets/stylesheets/contentfocus/_hover_tile.scss