Q:

Make text show background on hover through the background color

So here is the link when i am not hovering over it.

I tried looking up how too make the text transparent so that you can see the background of the image through the text, but couldn't find anything about this. Here is what it looks like when I hover over the link.

Here is the code for the div I am doing this in.

#learnmore{
    padding: 10px;
    margin: 10px;
    border: 2px solid white;
    color: white;
}

#learnmore:link{
    padding: 10px;
    border: 2px solid white;
    color: white;
}

#learnmore:visited{
    padding: 10px;
    border: 2px solid white;
    color: white;
}

#learnmore:hover{
    background: white;
    color: transparent;
}

#learnmore:active{
    padding: 10px;
    border: 2px solid white;
    color: white;
}
<div id="offer">
    <img src="imgs/detroit.jpeg" title="" alt="">

    <h1>Offer Header</h1>

    <p>Here is a little bit of information about our offer.</p>

    <a href="" id="learnmore">Learn More</a>
    <a href="" id="scrolldown"><img src="imgs/down arrow.png"></a>
</div>

Does anybody know if this is possible?

A:

how too make the text transparent so that you can see the background of the image through the text,

You can use mix-blend-mode: hard-light; . Also you have lot of code redundancy (you have the same rule for :link, :active etc) which I have refactored by using a , and grouping together. 

#learnmore,
#learnmore:link,
#learnmore:visited,
#learnmore:active {
  padding: 10px;
  margin: 10px;
  border: 2px solid white;
  color: white;
  font-size:40px;
  text-decoration:none;
}
#learnmore:hover {
  background-color:white;
  mix-blend-mode: hard-light;
  color: purple;
}
body {
  background-color: purple;
}
<div id="offer">
  <p>Here is a little bit of information about our offer.</p>

  <a href="" id="learnmore">Learn More</a>  
</div>

