<div class="container">
  <h1>CSS Mask Demos: only working on Webkit browsers</h1>

  <article class="alpha-mask">
    <h2>Alpha Mask</h2>
    <img class="target alpha-target" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/backdrop.jpg" alt="Masked image">
  </article>

  <article class="luminance-mask">
    <h2>Luminance Mask</h2>
    <img class="target luminance-target" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/backdrop.jpg" alt="Masked image">
  </article>

  <article class="mask-repeat">
    <h2>mask-repeat Property</h2>
    <img class="target-repeat" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/backdrop.jpg" alt="Masked image.">
  </article>

  <article class="mask-position mask-pos-top">
    <h2>mask-position Property: top left</h2>
    <div class="mask-container">
      <img class="mask-pos-target" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/backdrop.jpg" alt="Masked image">
    </div>
  </article>

  <article class="mask-position mask-pos-bottom">
    <h2>mask-position Property: bottom right</h2>
    <div class="mask-container">
      <img class="mask-pos-target" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/backdrop.jpg" alt="Masked image">
    </div>
  </article>

  <article class="mask-size-half">
    <h2>mask-size Property: half</h2>
    <div class="mask-container">
      <img class="target mask-size-target" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/backdrop.jpg" alt="Masked image">
    </div>
  </article>

  <article class="mask-size-contain">
    <h2>mask-size Property: contain</h2>
    <div class="mask-container">
      <img class="target mask-size-target" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/backdrop.jpg" alt="Masked image">
    </div>
  </article>
</div>

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  font-family: sans-serif;
  font-weight: 400;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 90%;
  margin: 0 auto;
  text-align: center;
}

article {
  margin-bottom: 32px;
}

.target {
  display: block;
  max-width: 50%;
  height: auto;
  margin: 0 auto;
}

.alpha-target {
  mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/alpha-cat.png);
  mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-size: 80%;
}

.luminance-target {
  mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/luminance-cat.png);
  mask-mode: luminance;
  mask-repeat: no-repeat;
  mask-size: 80%;
}

.target-repeat {
  margin: 20px auto;
  display: block;
  max-width: 100%;
  height: 450px;
  mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/trapeze.png);
  mask-repeat: space;
  mask-size: 100px 100px;
}

.mask-container {
  border: 5px solid #444;
  width: 80%;
  margin: 0 auto;
  padding: 0;
}

.mask-pos-target {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/alpha-cat.png);
  mask-repeat: no-repeat;
  mask-size: 40%;
}

.mask-pos-top .mask-pos-target {
  mask-position: 0 0;
}

.mask-pos-bottom .mask-pos-target {
  mask-position: 100% 100%;
}

.mask-size-target {
  mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/alpha-cat.png);
  mask-repeat: no-repeat;
  mask-position: center center;
}

.mask-size-half .mask-size-target {
  mask-size: 50%;
}

.mask-size-contain .mask-size-target {
  mask-size: contain;
}