CodeMyUI/fading-text-with-css-blend-modes.markdown

## fading-text-with-css-blend-modes.markdown

      
    Raw
  

              fading-text-with-css-blend-modes.markdown
            
          
    Fading text with CSS blend modes

I'm pretty sure I saw this effect months ago on another pen (using SVG?), but I can't remember it. If anyone does, please link so I can credit for the inspo.
A Pen by Giana on CodePen.
License.

  
## index.html
<div class="wrapper">
  <div class="content">
    <h1>Fade away text</h1>

    <p>Hover over me to reveal the rest. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora doloremque facere quis, molestias dicta! Quidem ullam, dolore assumenda, iste laborum debitis inventore sequi magnam eos tempore recusandae laudantium dignissimos voluptates.Perferendis illo eius provident rem consequatur, sequi eos nulla sit nihil alias sapiente, dolorum natus laboriosam harum consectetur maxime facilis, ipsam commodi.</p>
  </div>
</div>

## style.scss
@mixin fadeText($text-color, $direction : top, $offset : 2em, $transition: 0.5s ease-out) {
  // text-color : dark
  $color: #fff;

  // direction : top
  $deg: 180deg;
  $pos: bottom;

  @if($text-color == 'light') {
    $color: #000;
    mix-blend-mode: screen;
  } @else {
    mix-blend-mode: multiply;
  }

  @if($direction == 'left') {
    $deg: 90deg;
    $pos: right;
  } @elseif ($direction == 'right') {
    $deg: -90deg;
    $pos: left;
  } @elseif ($direction == 'bottom') {
    $deg: 0deg;
    $pos: top;
  }

  position: relative;

  &::after {
    background: linear-gradient($deg, transparent, $color $offset) no-repeat $pos center / 100% 100%;

    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    pointer-events: none;
    transition: $transition;
  }

  &:hover::after {
    @if($direction == 'left' or $direction == 'right') {
      background-size: 0% 100%;
    } @else {
      background-size: 100% 0%;
    }
  }

}

// Your text color should have good contrast (either very light or very dark, with the appropriate option passed above) or the entire block will start turning transparent

p {
  color: #fff;
  @supports(mix-blend-mode: screen){
     @include fadeText(light, top, 3rem);
  }
}

/* Pen styling */
// This was on <body> but then it mysteriously broke on Chrome
.wrapper {
  background: #222 url(https://source.unsplash.com/yNGQ830uFB4/1600x900) 50% 50% / cover;
  display: flex;
  align-items: center;
  font: 18px/1.5 'Roboto', sans-serif;
  justify-content: center;
  min-height: 100vh;
  position: relative;

  &::before {
    background: #222;
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    opacity: 0.5;
  }
}

h1 {
  font-size: 32px;
  font-weight: 300;
}

.content {
  color: #fff;
  max-width: 600px;
  text-align: center;
  position: relative;
}

## styles
<link href="https://fonts.googleapis.com/css?family=Roboto:300&text=Fadewytx" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:400" rel="stylesheet" />
	<div class="wrapper">
	<div class="content">
	<h1>Fade away text</h1>

	<p>Hover over me to reveal the rest. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora doloremque facere quis, molestias dicta! Quidem ullam, dolore assumenda, iste laborum debitis inventore sequi magnam eos tempore recusandae laudantium dignissimos voluptates.Perferendis illo eius provident rem consequatur, sequi eos nulla sit nihil alias sapiente, dolorum natus laboriosam harum consectetur maxime facilis, ipsam commodi.</p>
	</div>
	</div>
	@mixin fadeText($text-color, $direction : top, $offset : 2em, $transition: 0.5s ease-out) {
	// text-color : dark
	$color: #fff;

	// direction : top
	$deg: 180deg;
	$pos: bottom;

	@if($text-color == 'light') {
	$color: #000;
	mix-blend-mode: screen;
	} @else {
	mix-blend-mode: multiply;
	}

	@if($direction == 'left') {
	$deg: 90deg;
	$pos: right;
	} @elseif ($direction == 'right') {
	$deg: -90deg;
	$pos: left;
	} @elseif ($direction == 'bottom') {
	$deg: 0deg;
	$pos: top;
	}

	position: relative;

	&::after {
	background: linear-gradient($deg, transparent, $color $offset) no-repeat $pos center / 100% 100%;

	content: '';
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	pointer-events: none;
	transition: $transition;
	}

	&:hover::after {
	@if($direction == 'left' or $direction == 'right') {
	background-size: 0% 100%;
	} @else {
	background-size: 100% 0%;
	}
	}

	}

	// Your text color should have good contrast (either very light or very dark, with the appropriate option passed above) or the entire block will start turning transparent

	p {
	color: #fff;
	@supports(mix-blend-mode: screen){
	@include fadeText(light, top, 3rem);
	}
	}

	/* Pen styling */
	// This was on <body> but then it mysteriously broke on Chrome
	.wrapper {
	background: #222 url(https://source.unsplash.com/yNGQ830uFB4/1600x900) 50% 50% / cover;
	display: flex;
	align-items: center;
	font: 18px/1.5 'Roboto', sans-serif;
	justify-content: center;
	min-height: 100vh;
	position: relative;

	&::before {
	background: #222;
	content: '';
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	opacity: 0.5;
	}
	}

	h1 {
	font-size: 32px;
	font-weight: 300;
	}

	.content {
	color: #fff;
	max-width: 600px;
	text-align: center;
	position: relative;
	}
	<link href="https://fonts.googleapis.com/css?family=Roboto:300&text=Fadewytx" rel="stylesheet" />
	<link href="https://fonts.googleapis.com/css?family=Roboto:400" rel="stylesheet" />