A Pen by Secret Sam.

Gif-Mask.markdown

Gif Mask

Forked from andrewgbaker's Pen Gif Mask.

A Pen by Secret Sam on CodePen.

License.

index.html

<section>
  <p><span>have fun</span><p>
  <h1>Do <br />good<br /> work</h1> 
    <p><span>make money. build business</span></p>
</section>

style.scss

@import url(http://fonts.googleapis.com/css?family=Oswald:700);

$dark_gray: #3d3d3d;

section {
  text-align: center;
  width: 80%;
  max-width: 600px;
  height: 100%;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}

h1 {
  font-size: 9.0em;
  text-transform: uppercase;
  font-family: 'Oswald', sans-serif;
  background: url(http://karshhagan.com/demos/sxsb/cto2.gif) left center no-repeat;
  background-size: cover;
  /* BACKGROUND CLIP TO ALLOW GIF TO MASK THROUGH */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

p {
  margin: 40px;
  font-size: 2.2em;
  font-family: 'Didot', serif;
  color: $dark_gray;
  span {
    position: relative;
    display: inline-block;
    line-height: 1;
    &:after, &:before {
      content: "";
      position: absolute;
      top: 50%;
      height: 1px;
      background: $dark_gray;
      width: 99999px;
    }
    &:before {
      left: 100%;
      margin-left: 20px;
    }
    &:after {
      right: 100%;
      margin-right: 20px;
    }
  }
}