<div class="bg">
  <div class="camouflage">CAMOUFLAGE</div>
</div>
$img: url(http://creatorsblog.nijibox.jp/wp/wp-content/uploads/2018/03/nature.jpg);

.bg {
  width:100%;
  min-width: 630px;
  height:100%;
  background-image: $img;
  background-size: 100% auto;
  background-position: center center;
  display: table;
  position:fixed;
  left:50%;
  transform: translateX(-50%);
}

.camouflage {
  font-family: sans-serif;
  font-size: 10vw;
  letter-spacing: -0.1em;
  font-weight:900;
  color: transparent;
  background-image: radial-gradient(farthest-side,#000,#000,transparent),$img;
  background-repeat: no-repeat;
  background-size: 200% 200%,130% auto;
  background-position: center center, center center;
  -webkit-background-clip:text;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.camouflage:hover {
  animation: effect 10s forwards;
}


@keyframes effect {
  0% {
    background-size:200% 200%, 130% auto;
  }
  35%{
    background-size:0 0, 130% auto;
  }
  100% {
    background-size:0 0, 100% auto;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.