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 {
position: relative;
width: 32px;
height: 64px;
height: 79px; /* 64 + 15 */
}
.players .player .link {
display: block;
z-index: 200;
position: absolute;
left: 0;
top: 0;
top: 15px; /* The 15 added to .players .player height */
right: 0;
bottom: 0;
}
.players .player iframe {
position: relative;
position: absolute;
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 {
z-index: 50;

View File

@ -37,6 +37,8 @@
});
$(".milestones").slideDown();
$('.player').tooltip();
});
});
</script>
@ -66,8 +68,8 @@
</ul>
<div class="players">
<div class="player player-craftysaurus" >
<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>
<div class="player player-craftysaurus" title="visit my website">
<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>
<a class="link" href="http://marcuswhybrow.net/"></a>
</div>