Contents

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

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

  position: relative;
  line-height: 0;
  width: 100%;
  margin-bottom: $base-line-height;  

  img {
   width: 100%;
   height: auto;
   position: relative;
   top: 0;
   left: 0; 
  }

  .copy {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: auto;
    z-index: 999;
    text-align: center;
    @include transform(translate(-50%, -50%));

    p {
      line-height: 1.5em;
      padding: 1em 2em;
      position: relative;
      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-dynamic.scss