CSS masks example

Made for kutac.cz/blog

HTML

<div class="bg">
  <div class="bg-mask">
    <h1>Lorem ipsum dolor</h1>
  </div>
</div>

CSS

.bg {
  position: relative;
  width: 600px;
  height: 400px;
  overflow-x: hidden;
  background-image: url(http://www.kutac.cz/image/arc2-11228.jpg);
  background-size: cover;
}

.bg-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: url(http://www.kutac.cz/image/arc-mask-20945.png);
  mask-image: url(http://www.kutac.cz/image/arc-mask-20945.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center;
  mask-position: center;
}

h1 {
  position: absolute;
  top: 220px;
  left: 0;
  width: 100%;
  padding-left: 35px;
  padding-right: 35px;
  font-size: 40px;
  transition: padding-left 2s ease-in-out;
}

h1:hover { padding-left: 235px; }