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 {
    left: 50%;
    margin: auto;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;

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

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

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

Version data entries

1 entries across 1 versions & 1 rubygems

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