CodePen

HTML

            
              <div style="text-align:center;">
  <div class="SurvivalHub"><a href="/home"></a></div>
  <div class="PVPHub"><a href="#"></a></div>
</div>

            
          
!
via HTML Inspector

CSS

            
              div.SurvivalHub { 
  
  display:inline-block;
width:285px;
  height:545px;
  transition: all 0.50s ease-in-out; 
-webkit-transition: all 0.50s ease-in-out; 
-moz-transition: all 0.50s ease-in-out; 
-o-transition: all 0.50s ease-in-out; 
-ms-transition: all 0.50s ease-in-out; 
background-image:url(http://files.enjin.com/119148/Learn2Craft/Hub/Survival/Not_Active.png);
margin-right:10px;
}
div.SurvivalHub:hover { 
transition: all 0.50s ease-in-out; 
-webkit-transition: all 0.50s ease-in-out; 
-moz-transition: all 0.50s ease-in-out; 
-o-transition: all 0.50s ease-in-out; 
-ms-transition: all 0.50s ease-in-out; 
background-image:url(http://files.enjin.com/119148/Learn2Craft/Hub/Survival/Active.png);
margin-right:10px;
}
div.PVPHub { 
  display:inline-block;
width:285px;
  height:545px;
  transition: all 0.50s ease-in-out; 
-webkit-transition: all 0.50s ease-in-out; 
-moz-transition: all 0.50s ease-in-out; 
-o-transition: all 0.50s ease-in-out; 
-ms-transition: all 0.50s ease-in-out; 
background-image:url(http://files.enjin.com/119148/Learn2Craft/Hub/PVP/Not_Active.png);
margin-right:10px;
}
div.PVPHub:hover { 
transition: all 0.50s ease-in-out; 
-webkit-transition: all 0.50s ease-in-out; 
-moz-transition: all 0.50s ease-in-out; 
-o-transition: all 0.50s ease-in-out; 
-ms-transition: all 0.50s ease-in-out; 
background-image:url(http://files.enjin.com/119148/Learn2Craft/Hub/PVP/Active.png);
margin-right:10px;
}

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

JS

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