<link href='https://fonts.googleapis.com/css?family=Raleway:400,300,600,500,900,700,800' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Lilita+One' rel='stylesheet' type='text/css'>
	
<div id="mask-text">
     <h1>MASK TEXT</h1>
		</div>
@import "compass/css3";

#mask-text h1 {
    font-size: 100px;
    font-family: 'Lilita One', sans-serif;
    color: #ffe400;
    text-shadow: 7px 7px 0px #34495e;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    display: block;
    -webkit-mask-image: url('https://www.w3cplus.com/sites/default/files/blogs/2015/1504/texture.png');
    -webkit-transition:all 2s ease;
    -moz-transition:all 2s ease;
    -o-transition:all 2s ease;
    transition:all 2s ease;

  &:hover {
    -webkit-mask-image: url('https://www.w3cplus.com/sites/default/files/blogs/2015/1504/texture-hover.png');
    cursor: pointer;
    color: #ffe400;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js