CodePen

HTML

            
              <center><a href="/home">
<div class="SurvivalHub" style="text-align:center;float:left;width:285px;height:545px;"></div></a>
<a href="#">
<div class="PVPHub" style="text-align:center;float:left;width:285px;height:545px;"></div></a>
<style>
div.SurvivalHub { 
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 { 
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;
}
</style>
</div></center>
            
          
!

↑ Insert the most common viewport meta tag

CSS

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

JS

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