Edit in JSFiddle

<div id="gridslider">
  <a class="griditem_A" href="#">
    <h1>TEAM NEWS</h1>
    <p>
      Need for News?</p>
  </a>
  <a class="griditem_B" href="#"><h1>SPONSORS</h1>
    <p>
      The People making things possible.</p></a>
  <a class="griditem_C" href="#"><h1>THE TEAM</h1>
    <p>
      Our Dedicated People</p></a>
  <a class="griditem_D" href="#"><h1>EVENTS</h1>
    <p>
      The upcoming Team spectacles.</p></a>
</div>
#gridslider {
  line-height: 0;
  padding: 0 auto;
  margin: 0 auto;
  width: 100%;
  height: auto;
}

#gridslider a {
  line-height: 2em;
  position: relative;
  transition: all 1s;
  width: 25%;
  height: 75vh;
  float: left;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  text-decoration: none;
  margin: 0;
  padding: 0;
}

#gridslider a h1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: all 1s;
  width: auto;
  height: 25%;
  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 28px;
  font-weight: bolder;
  color: #333;
}

#gridslider a p {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: all 1s;
  width: auto;
  height: 25%;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 20px;
  font-weight: bolder;
  color: #fff;
  background: rgba(128, 128, 128, 0.75);
}

#gridslider a:hover h1,
#gridslider a:hover p {
  transition: all 1s;
  opacity: 1;
}

.griditem_A {
  background: url(http://teamcontego.co.za/wp-content/uploads/2015/10/Stairs.jpg);
}

.griditem_B {
  background: url(http://teamcontego.co.za/wp-content/uploads/2015/07/IMG_9877.jpg);
}

.griditem_C {
  background: url(http://teamcontego.co.za/wp-content/uploads/2015/04/Chopper.jpeg);
}

.griditem_D {
  background: url(http://teamcontego.co.za/wp-content/uploads/2015/04/Sick-Pic.jpg);
}

#gridslider a p.filler {
  height: 25%;
  width: auto;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0);
}

@media screen and (max-width: 860px) {
  #gridslider a {
    transition: all 1s;
    width: 50%;
    height: 50vh;
    float: left;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    text-decoration: none;
    margin: 0;
    padding: 0;
  }
}