Player now levitates and displays tooltip.

This commit is contained in:
Marcus Whybrow 2012-06-15 15:27:09 +01:00
parent 54caea0441
commit af2ccee7dc
2 changed files with 22 additions and 5 deletions

View File

@ -164,20 +164,35 @@ body {
.players .player { .players .player {
position: relative; position: relative;
width: 32px; width: 32px;
height: 64px; height: 79px; /* 64 + 15 */
} }
.players .player .link { .players .player .link {
display: block; display: block;
z-index: 200; z-index: 200;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 15px; /* The 15 added to .players .player height */
right: 0; right: 0;
bottom: 0; bottom: 0;
} }
.players .player iframe { .players .player iframe {
position: relative; position: absolute;
z-index: 100; z-index: 100;
bottom: 0;
left: 0;
-webkit-transition: all 0.05s linear;
-moz-transition: all 0.05s linear;
-ms-transition: all 0.05s linear;
-o-transition: all 0.05s linear;
transition: all 0.05s linear;
}
.players .player:hover iframe {
-webkit-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
-ms-transform: translate(0, -10px);
-o-transform: translate(0, -10px);
transform: translate(0, -10px);
} }
.players .player .shadow { .players .player .shadow {
z-index: 50; z-index: 50;

View File

@ -37,6 +37,8 @@
}); });
$(".milestones").slideDown(); $(".milestones").slideDown();
$('.player').tooltip();
}); });
}); });
</script> </script>
@ -66,8 +68,8 @@
</ul> </ul>
<div class="players"> <div class="players">
<div class="player player-craftysaurus" > <div class="player player-craftysaurus" title="visit my website">
<iframe src="http://marcuswhybrow.github.com/minecraft-widgets/minecraft-skin.html?playername=craftysaurus&amp;scale=2" allowtransparency="true" frameborder="0" scrolling="0" width="32" height="64"></iframe> <iframe src="http://marcuswhybrow.github.com/minecraft-widgets/skin.html?playername=craftysaurus&amp;scale=2" allowtransparency="true" frameborder="0" scrolling="0" width="32" height="64"></iframe>
<div class="shadow"></div> <div class="shadow"></div>
<a class="link" href="http://marcuswhybrow.net/"></a> <a class="link" href="http://marcuswhybrow.net/"></a>
</div> </div>