Singular hover will not work
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var totalMoney = 0;
var clickMultiplier = 1;
var incomeSecond = 0;
var totalVirus = 0;
var totalTrojan = 0;
var totalWorm = 0;
var totalServer = 0;

function totalMoneyText() {
  totalMoney = totalMoney + 1 * clickMultiplier;
}
setInterval(function() {
  totalMoney = incomeSecond + totalMoney;
  incomeSecond = (totalWorm) + (totalTrojan * 2) + (totalVirus);
}, 1000);
setInterval(function() {
  updateText();
}, 100);
setInterval(function() {
  totalTrojan = totalTrojan * 1.001;
  totalWorm = totalWorm * 1.01;
}, 5000);

function updateText() {
  document.getElementById("totalMoney").innerHTML = totalMoney.toLocaleString("en-US", {
    style: "currency",
    currency: "USD",
    maximumFractionDigits: 0
  });
  document.getElementById("buyablenum1").innerHTML = Math.round(totalVirus * 1000) / 1000;
  document.getElementById("buyablenum2").innerHTML = Math.round(totalTrojan * 1000) / 1000;
  document.getElementById("buyablenum3").innerHTML = Math.round(totalWorm * 1000) / 1000;
}

function buyable1() {
  if (totalMoney &gt; 49) {
    totalMoney = totalMoney - 50;
    totalVirus = totalVirus + 1;
  } else {
    window.alert("You don't have enough to buy that!")
  }
}

function buyable2() {
  if (totalMoney &gt; 149) {
    totalMoney = totalMoney - 150;
    totalTrojan = totalTrojan + 1;
  } else {
    window.alert("You don't have enough to buy that!")
  }
}

function buyable3() {
  if (totalMoney &gt; 499) {
    totalMoney = totalMoney - 500;
    totalWorm = totalWorm + 1;
  } else {
    window.alert("You don't have enough to buy that!")
  }
}

function buyable4() {
  if (totalMoney &gt; 99) {
    totalMoney = totalMoney - 100;
    totalServer = totalServer + 1;
  } else {
    window.alert("You don't have enough to buy that!")
  }
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>@font-face{

font-family:HackingT;
 src:url(assets/HackingTrashed-Regular.ttf);

}
@font-face{

font-family:Currency;
 src:url(assets/Currency.ttf);

}
@font-face{

font-family:Hacker;
 src:url(assets/Hacker.tff);

}
body,
html {
  overflow-x:hidden;
  overflow-y:hidden;
}
html {
  background:url(assets/background.png) no-repeat center center fixed;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
}
head {} body {} #meme {
  color:transparent;
}
.globalcontainer {
  position:relative;
  margin:0% 0;
  min-height:100vh;
}
.buyablecontainer {
  position:relative;
  z-index:2;
}
.clickablecontainer {
  margin:26.5% auto;
  position:relative;
  z-index:2;
}
#Money {
  font-size:50px;
  color:whitesmoke;
  text-align:center;
  font-family:"HackingT";
  text-shadow:1px 1px grey;
  margin:0 auto;
}
#totalMoney {
  font-size:40px;
  color:whitesmoke;
  text-align:center;
  font-family:"Currency";
  letter-spacing:3px;
  text-shadow:1px 1px grey;
  margin:0 auto;
}
.column {
  position:absolute;
}
.buyImg {
  width:15%;
  border:2px grey solid;
}
.noselect {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  cursor:default;
}
#imgComputer {
  width:15%;
}
.clickable {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  cursor:default;
  -webkit-user-drag:auto | element | none;
  -moz-user-select:none | text | all | element -ms-user-select:none | text | all | element
}
.number {
  color:snow;
  padding:1px;
}
#buyImg:active {} .buyable1 {
  position:relative;
}
.tooltip {
  position:absolute;
  margin:0% 1%;
  padding:14% 44%;
  border:4px grey solid;
  background-color:black;
  background-blend-mode:difference;
}
.tooltipheader {
  font-family:"Hacker";
  color:forestgreen;
  position:absolute;
  display:inline;
  top:-10%;
  left:0;
}
.tooltiptext {
  color:forestgreen;
  position:absolute;
  font-family:"Hacker";
  display:inline;
  text-align:center;
  font-size:15px;
  left:0%;
  top:50%
}
.tooltipincome {
  position:absolute;
  font-size:20px;
  left:5%;
  margin:-13% 24%;
  font-family:"Hacker";
  color:forestgreen;
}
#tooltip1 {
  display:none;
}
#tooltip2 {
  display:none;
}
#tooltip3 {
  display:none;
}
#tooltip4 {
  display:none;
}
#virus:hover~#tooltip1 {
  display:inline;
}
#trojan:hover~#tooltip2 {
  display:inline;
}
#worm:hover~#tooltip3 {
  display:inline;
}
#server:hover~tooltip4 {
  display:inline;
}
#server {
  width:25%;
  padding:1%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;title&gt;Hacker Clicker&lt;/title&gt;
  &lt;link rel=stylesheet type="text/css" href="styles.css" /&gt;
  &lt;script type="text/javascript" src="scripts.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;!-- Optional theme --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"&gt;

  &lt;!-- Latest compiled and minified JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body class=noselect&gt;
  &lt;div class=globalcontainer&gt;
    &lt;div class="header"&gt;
      &lt;a id=meme href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"&gt;Click me&lt;/a&gt;
      &lt;h1 class=noselect id=Money&gt;Money&lt;/h1&gt;
      &lt;h1 class=noselect id=t otalMoney&gt;$0&lt;/h1&gt;
    &lt;/div&gt;

    &lt;!-- Numbers and Buyables --&gt;
    &lt;div class="container buyablecontainer noselect"&gt;
      &lt;div class="column"&gt;
        &lt;div class="buyable1"&gt;
          &lt;h2 class=number id=buyablenum1&gt;0&lt;/h2&gt;
          &lt;img draggable="false" id=virus onclick="buyable1()" class=buyImg src="assets/virus.png" /&gt;
          &lt;div id=tooltip1 class=tooltip&gt;
            &lt;h1 class=tooltipheader&gt;"Virus"&lt;/h1&gt;
            &lt;h2 class=tooltipincome&gt;Income: $1 per second Price:50&lt;/h2&gt;
            &lt;p class=tooltiptext&gt;A virus tries to infect anyone and everyone that it can, it's usually used as a way to collect revunue through email spam, aswell to fuck your life up.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="buyable2"&gt;
          &lt;h2 class=number id=buyablenum2&gt;0&lt;/h2&gt;
          &lt;img draggable="false" id=trojan onclick="buyable2()" class=buyImg src="assets/trojan.png" /&gt;
          &lt;div id=tooltip2 class=tooltip&gt;
            &lt;h1 class=tooltipheader&gt;"Trojan"&lt;/h1&gt;
            &lt;h2 class=tooltipincome&gt;Income:$2 per second 0.01% replication Price:150&lt;/h2&gt;
            &lt;p class=tooltiptext&gt;A trojan creates a backdoor to your computer and gives confidential or personal information to the creator.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="buyable3"&gt;
          &lt;h2 class=number id=buyablenum3&gt;0&lt;/h2&gt;
          &lt;img draggable="false" id=worm onclick="buyable3()" class=buyImg src="assets/worm.png" /&gt;
          &lt;div id=tooltip3 class=tooltip&gt;
            &lt;h1 class=tooltipheader&gt;"Worm"&lt;/h1&gt;
            &lt;h2 class=tooltipincome&gt;Income:$1 per second 1% replication Price:500&lt;/h2&gt;
            &lt;p class=tooltiptext&gt;A worm self replicates through the interwebs and lives inside everyone which it is allowed. They are used to do any ill-biddings that the creator wants.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="buyable4"&gt;
          &lt;h2 class=number id=buyablenum4&gt;0&lt;/h2&gt;
          &lt;img draggable="false" id=server onclick="buyable4()" class=buyImg src="assets/server.png" /&gt;
          &lt;div id=tooltip4 class=tooltip&gt;
            &lt;h1 class=tooltipheader&gt;"Server"&lt;/h1&gt;
            &lt;h2 class=tooltipincome&gt;Income:$0 +2 on click Price:100&lt;/h2&gt;
            &lt;p class=tooltiptext&gt;The more servers you got, the more you can hack. Get it foo?&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=clickablecontainer align="center"&gt;
      &lt;img draggable="false" onclick="totalMoneyText()" id=imgComputer class=clickable src="assets/hacking.gif" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p><a href="http://jsfiddle.net/3y10ssrk/1/" rel="nofollow">Jsfiddle</a>
<a href="http://i.stack.imgur.com/TAtUk.jpg" rel="nofollow">What's supposed to show up</a></p>

<p>I apologize in advance for not being able to see the images, but if you try to hover over the 4 icons to the left they work except the last one, hopefully it isn't a simple mistake as I started HTML CSS and Javascript 2 days ago, but it is entirely possible and I'm sorry if that's the case :p.</p>

<p>Also, I'm having a hard time with CSS positioning things exactly where I want them, for example if I want to have an image in the center no matter what ever is around it how do I do that?
Any tips?</p>