WQQgLg

index.html

<div class="faded">
  <h1>Faded Out</h1>  
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad numquam laudantium impedit, officia ullam, ipsa sunt quisquam non, doloremque mollitia eveniet qui accusantium? A laborum sint eos alias, aliquid rem.    
  </p>  
</div>

style.css

@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700)

*
  margin: 0
  padding: 0
  box-sizing: border-box
  
html
  line-height: 1.75
  font-family: lato, sans-serif
  font-weight: 100  
  padding: 3rem

h1
  margin: 0
  font-weight: 100
  
.faded
  padding: 30px
  width: 300px
  height: 300px
  overflow: hidden
  position: relative
  &:after
    content: ''
    position: absolute
    display: block    
    width: 100%    
    height: 100%   
    top: 0
    background: linear-gradient(to top, white, white 10%, transparent)
    background-repeat: no-repeat
    transition: all 500ms ease
  &:hover
    &:after
      background-position: 0 200px

WQQgLg.markdown

WQQgLg

A Pen by Cory Simmons on CodePen.

License.