Contents

.image-gradient-dynamic {
  $image-gradient-color-top: red; 
  $transparency-top: 0.9;
  $image-gradient-color-bottom: green; 
  $transparency-bottom: 0.6;
  $vertical-angle: 0deg;
  $image-gradient-color-left: teal; 
  $transparency-left: 0.8;
  $image-gradient-color-right: yellow; 
  $transparency-right: 0.8;
  $horizontal-angle: 90deg;
  
  line-height: 0;
  position: relative;
  width: 100%;

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

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

    p {
      color: white;
      font-weight: 800;
      line-height: 1.5em;
      padding: 1em 2em;
      position: relative;
    }
  }

  .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 {
      @include linear-gradient($horizontal-angle, transparentize($image-gradient-color-left, $transparency-left), 
        transparentize($image-gradient-color-right, $transparency-right));
      @include position(absolute, 0px 0px 0px 0px);
      content: '';
      display: block;
    }
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
refills-0.1.0	source/stylesheets/refills/_image-gradient-dynamic.scss