Progress Widget

by Znuff

HTML

<!-- Throne of Thunder -->

<h2 class="caption divheadline widget-header">
  <span class="bg">
    <span class="left">
      <span class="right">Throne of Thunder</span>
    </span>
  </span>
</h2>

<div class="throne-progression">
    <div class="jinrokh-downed"> <a class="tooltip" href="#">
      <img src="http://media.wowstead.com/attachments/351/252/634584958519846000.png" alt="" />
      <span class="custom info">
      <em>Jin'rokh the Breaker</em>
      <br />Normal: Not Completed
      <br />Heroic: Not Completed</span>
    </a>

    </div>
    <div class="horridon-heroic"> <a class="tooltip" href="#">
      <img src="http://media.wowstead.com/attachments/351/252/634584958519846000.png" alt="" />
      <span class="custom info">
      <em>Horridon</em>
      <br />Normal: Not Completed
      <br />Heroic: Not Completed</span>
    </a>

    </div>
    <div class="council"> <a class="tooltip" href="#">
      <img src="http://media.wowstead.com/attachments/351/252/634584958519846000.png" alt="" />
      <span class="custom info">
      <em>Council of Elders</em>
      <br />Normal: Not Completed
      <br />Heroic: Not Completed</span>
    </a>

    </div>
    <div class="tortos"> <a class="tooltip" href="#">
      <img src="http://media.wowstead.com/attachments/351/252/634584958519846000.png" alt="" />
      <span class="custom info">
      <em>Tortos</em>
      <br />Normal: Not Completed
      <br />Heroic: Not Completed</span>
    </a>

    </div>
    <br />
    <div class="megaera"> <a class="tooltip" href="#">
      <img src="http://media.wowstead.com/attachments/351/252/634584958519846000.png" alt="" />
      <span class="custom info">
      <em>Megaera</em>
      <br />Normal: Not Completed
      <br />Heroic: Not Completed</span>
    </a>

    </div>
    <div class="jikun"> <a class="tooltip" href="#">
      <img src="http://media.wowstead.com/attachments/351/252/634584958519846000.png" alt="" />
      <span class="custom info">
     ...

CSS

/* ===[ Tool Tips ]=== (DO NOT COPY THIS IF YOU ALREADY HAVE A TOOLTIP SECTION IN YOUR CUSTOM CSS!! */
 .tooltip span {
    margin-left: -999em;
    position: absolute;
}
.tooltip:hover span {
    border-radius: 5px;
    box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
    font-family: Calibri, Tahoma, Geneva, sans-serif;
    left: 100%;
    margin-left: 0;
    position: absolute;
    top: 100%;
    width: 175px;
    z-index: 99;
    color: #fff;
}
.info {
    background: none repeat scroll 0 0 #000;
    border: 1px solid #FFF;
}
.custom {
    padding: 0.8em 1em
}
.tooltip {
    color: #000000;
    cursor: help;
    outline: medium none;
    position: relative;
    text-decoration: none;
}
/* ===[ Throne of Thunder ]=== */
 .throne-progression {
    height: 220px;
    margin: 0 auto;
    padding-top: 10px;
    width: 160px;
}
.throne-progression .text img {
    margin-bottom: 0
}
.throne-progression a {
    padding-top: 35px
}
.throne-progression em {
    font-weight: bold;
    font-size: 14px;
    font-style: normal;
}
.jinrokh, .horridon, .council, .tortos, .megaera, .jikun, .durumu, .primordius, .darkanimus, .ironqon, .twinconsorts, .leishen, .jinrokh-downed, .horridon-downed, .council-downed, .tortos-downed, .megaera-downed, .jikun-downed, .durumu-downed, .primordius-downed, .darkanimus-downed, .ironqon-downed, .twinconsorts-downed, .leishen-downed, .jinrokh-heroic, .horridon-heroic, .council-heroic, .tortos-heroic, .megaera-heroic, .jikun-heroic, .durumu-heroic, .primordius-heroic, .darkanimus-heroic, .ironqon-heroic, .twinconsorts-heroic, .leishen-heroic {
    background: url('http://media-wowstead.cursecdn.com/attachments/436/978/tot-widget.png') no-repeat 0 0;
    width: 50px;
    height: 50px;
    float: left;
}
.jinrokh {
    background-position: 0 0
}
.horridon {
    background-position: -50px 0
}
.council {
    background-position: -100px 0
}
.tortos {
    background-position: -150px 0
}
.megaera {
    background-position: -200px 0
}
.jikun {
   ...