Cut-out text with CSS

Question

I try to create a hover effect for a button in CSS.

Basically text sho

Answer 1

In my example below, I'm using CSS mix-blend-mode with a blend mode of difference.

@import url(http://fonts.googleapis.com/css?family=Raleway:900,600,500,800,700);
* {
  box-sizing: border-box;
}
body {
  font-family: 'Raleway', sans-serif;
  background-color: white;
}
div {
  position: relative;
}
img {
  width:100%;
}
h1 {
  color: #000;
  background-color: #9c9c9c;
  padding: .5em 1em;
  position: absolute;
  bottom: 0;
  width: 100%;
  font-size: 10vw;
  font-weight: 900;
  text-transform: uppercase;
  mix-blend-mode: difference;
}

  
  
Let the sun shine!

View on CodePen
View my blog post on compositing and blending