Contents

.image-gradient {
  $image-gradient-color-top: teal; 
  $transparency-top: .6;
  $image-gradient-color-bottom: green; 
  $transparency-bottom: .6;
  $vertical-angle: 180deg;

  $image-gradient-color-left: red; 
  $transparency-left: .9;
  $image-gradient-color-right: yellow; 
  $transparency-right: .8;
  $horizontal-angle: 90deg;

  background: url(https://raw.github.com/Magnus-G/Random/master/EmeraldLake.jpg);
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  padding: 12em 0 12em 0;
  position: relative;
  width: 100%;
  display: table;
  margin-bottom: $base-line-height;

  .copy {
    position: absolute;
    left: 50%;
    margin: auto;
    z-index: 999;
    top: 40%;
    text-align: center;

    p {
      padding: 1em 2em;
      position: relative;
      left: -50%;
      color: white;
      font-weight: 800;
      background-color: transparentize(black, .6);
    }
  }

  .overlay {
    @include linear-gradient($vertical-angle, transparentize($image-gradient-color-top, $transparency-top), 
      transparentize($image-gradient-color-bottom, $transparency-bottom));
    display: block;
    @include position(absolute, 0px 0px 0px 0px);

    &:after {
      content: '';
      @include linear-gradient($horizontal-angle, transparentize($image-gradient-color-left, $transparency-left), 
        transparentize($image-gradient-color-right, $transparency-right));
      display: block;
      @include position(absolute, 0px 0px 0px 0px);
    }
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
refills-0.0.2	source/stylesheets/refills/_image-gradient.scss