CSS :hover issue displaying elements and background images - hover

Question

I'm having an issue getting the hover to work on my project. I used this code in a different project and worked fine (although I did not use the background image in that project). Ive tried modifying the hover to access ID and Class on separate blocks, no luck. Thanks for taking a look!
Here's my HTML:
<div class="divTableRow">
<a href="#">
<div class="divTableCell in-news">
<h3>In the News</h3>
<div class="hvr">
<p>Read about the buzz viveve is creating</p>
</div>
</div>
</a>
<a href="#">
<div class="divTableCell" id="investor">
<h3>Investor News</h3><div class="hvr">
<p>Read about Viveve's financials</p>
</div>
</div>
</a>
</div>
Here's my CSS:
.in-news {
background-color: #C4D600;
}
.in-news:hover {
background-color: none;
background-image: url(Images\InTheNews.png);
background-size: 50%;
background-repeat: no-repeat;
background-position: top 20px center;
}
#investor {
background-color: #8999BA;
}
#investor:hover {
background-color: none;
background-image: url(images\InvestorNews.png);
background-size: 50%;
background-repeat: no-repeat;
background-position: top 20px center;
}
.divTableCell {
display: table-cell;
width: 280px;
height: 280px;
float: left;
position: relative;
margin: 3px;
}
.hvr {
display: none;
}
.hvr:hover {
display:inline;
}
Thanks again.

Answer 1

Looks like you are missing quotes around the images URL. So it should be:
background-image: url("images\InvestorNews.png");
instead of:
background-image: url(images\InvestorNews.png);
Here's a working example: https://codepen.io/wedgess/pen/YOpBoq