How to make a transparent font on an opaque background?

Question

css

How do I make the font show through the background of the page when hovering over a button?

.button{
white-space: nowrap;
margin: 8px;
border: 2px solid #ffffff;
padding: 9px;
color: #ffffff !important;
text-decoration: none;
background-color: rgba(0, 0, 0, 0);
}

a[class="button"]{
line-height: 48px !important;
}

.button:hover{
background-color: #ffffff;
color: rgba(0, 0, 0, 0) !important;
}

In this case, the font shows through its own background and produces white letters on a white background.
You cannot set the font color to the page background color, because the background is an image.
Here is an explanation:
codepen.io/anon/pen/EVgEVj

Answer 1

There is no html code example, as far as I understand, this is what you need.

.button{
  background: url("http://lorempixel.com/200/100/nature/");
  display: inline-block;
  border-radius: 5px;
  padding: 10px;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
    
}

.button:hover{
  /*opacity: .2;*/
  color: rgba(255, 255, 255, .2);
}

You can either use a transparent text color or use opacity. The button can be built as you like
Live example here: Codepen