CodePen

HTML

            
              <div class="container">
  <a href="#" class="SurvivalHub"></a>
  <a href="#" class="PVPHub"></a>
</div>
            
          
!
via HTML Inspector

CSS

            
              .container {
  width: 590px;
  margin: 0px auto;
  padding: 10px 0px 10px 10px;
  overflow: hidden;
}

.container a {
  float: left;
  width: 285px;
  height: 545px;
  display: block;
  transition: background 0.5s ease-in-out; 
  margin-right: 10px;
}

.SurvivalHub {
background: url(http://files.enjin.com/119148/Learn2Craft/Hub/Survival/Not_Active.png);
}

.SurvivalHub:hover {
background: url(http://files.enjin.com/119148/Learn2Craft/Hub/Survival/Active.png);
}

.PVPHub { 
background: url(http://files.enjin.com/119148/Learn2Craft/Hub/PVP/Not_Active.png);
}

.PVPHub:hover { 
background: url(http://files.enjin.com/119148/Learn2Craft/Hub/PVP/Active.png);
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................