fixed mouseleave event

less/modules/usercard.less

@@ -3,9 +3,11 @@
 	background: #333;
 	top: -50%;
 	left: 0px;
-	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.156863), 0px 2px 10px 0px rgba(0, 0, 0, 0.117647);
+	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25), 0px 2px 10px 0px rgba(0, 0, 0, 0.25);
 	height: 150px;
+	width: 450px;
 	z-index: 1;
+	display: block;
 
 	a, a:hover, a:visited, a:active {
 		text-decoration: none;

lib/persona.js

@@ -172,7 +172,7 @@ $(document).ready(function() {
 					
 					templates.parse('modules/usercard', ajaxify.data.topics[index].user, function(html) {
 						var card = $(html);
-						avatar.parents('a').after(card);
+						avatar.parents('a').after(card.hide());
 
 						card.find('.btn-morph').click(function(event){
 							$(this).toggleClass('plus').toggleClass('heart');
@@ -187,10 +187,14 @@ $(document).ready(function() {
 							drop.css({top: y+'px', left: x+'px'}).addClass("animate");
 						});
 
-						card.on('mouseout', function() {
-							//card.remove();
+						card.on('mouseleave', function() {
+							card.fadeOut(function() {
+								card.remove();
 							});
 						});
+
+						card.fadeIn();
+					});
 				})
 		});
 		

templates/modules/usercard.tpl

@@ -1,12 +1,16 @@
 <div class="persona-usercard">
+	<a href="{config.relative_path}/user/{userslug}">
 		<!-- IF picture -->
 		<div class="usercard-picture" style="background-image:url({picture})"></div>
 		<!-- ELSE -->
 		<div class="usercard-picture" style="background-color: {icon:bgColor};">{icon:text}</div>
 		<!-- ENDIF picture -->
+	</a>
 	<div class="usercard-body">
+		<a href="{config.relative_path}/user/{userslug}">
 			<span class="usercard-name"><!-- IF fullname -->{fullname}<!-- ELSE -->{username}<!-- ENDIF fullname --></span><br />
-		<span class="usercard-username">@{username}</span><br />
+			<span class="usercard-username">@{username}</span>
+		</a>
 
 		<div class="row usercard-info">
 			<div class="col-xs-4">