CSS Basic :hover

Question

Can someone point out why the hover not working? I managed to add the background images to each the anchor elements. However, the code looks redundant but if I try to move the background-size:cover, background-position: right top and background-origin: content-box to the .menu-item class it just stops working. Also at the bottom of the CSS, there is a #ID:hover that doesn't seem to work and I have no clue why, any tips are appreciated :)

#thumb-services {
  width: 100%;
  height: 250px;
}

.menu-item {
  width: 24%;
  height: 100%;
  position: relative;
  float: left;
  margin: 0 0.66666667%;
  cursor: pointer;
}

#thumb-services > a:last-child {
  margin-right: 0;
  float: right;
}

#thumb-services > a:first-child {
  margin-left: 0;
}

#tratamento-imagem {
  background: url('http://lorempixel.com/100/200/sports/1/') no-repeat;
  background-size:cover;
  background-position: right top;
  background-origin: content-box;
}

#portfolio {
  background: url('http://lorempixel.com/100/200/sports/2/') no-repeat;
  background-size:cover;
  background-position: right top;
  background-origin: content-box;
}

#fotografia {
  background: url('http://lorempixel.com/100/200/sports/3/') no-repeat;
  background-size:cover;
  background-position: right top;
  background-origin: content-box;
}

#montagem {
  background: url('http://lorempixel.com/100/200/sports/4/') no-repeat;
  background-size:cover;
  background-position: right top;
  background-origin: content-box;
}

#tratamento-imagem:hover {
  background: red;
}

<nav id="thumb-services">
  <a id="tratamento-imagem" class="menu-item"></a>
  <a id="portfolio" class="menu-item"></a>
  <a id="fotografia" class="menu-item"></a>
  <a id="montagem" class="menu-item"></a>    
</nav>

Answer 1

You can also accomplish hovering effect using pseudo-elements: http://jsfiddle.net/mu20eLd1/. (Note: I've restructured some of your code).

HTML:

<nav id="thumb-services">
    <a></a>  
    <a></a>  
    <a></a>  
    <a></a>
</nav>

CSS:

#thumb-services {
    height: 250px;
}

#thumb-services > a {
    width: 24%;
    height: 100%;
    float: left;
    cursor: pointer;
    position: relative;
    background: url('http://lorempixel.com/100/200/sports/1/') no-repeat top left/cover;
}

#thumb-services > a + a {
    margin-left: 1.32%;
}


#thumb-services > a:nth-of-type(2) {
    background-image: url('http://lorempixel.com/100/200/sports/2/');
}

#thumb-services > a:nth-of-type(3) {
    background-image: url('http://lorempixel.com/100/200/sports/3/');
}

#thumb-services > a:nth-of-type(4) {
    background-image: url('http://lorempixel.com/100/200/sports/4/');
}

#thumb-services > a:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: hsla(0, 10%, 20%, 0.7);
    display: none;
}

#thumb-services > a:hover:before {
    display: block;
}

Answer 2

Rather than loading the images as backgrounds, just put them on the page and fade them out.

.menu-item:hover img {
    opacity: 0;
}

Here's an example