removed the img-polaroid class from main-poster and replaced the stats with a hover over for desktop. tbd duhsign for mobile

public/css/style.less

@@ -317,14 +317,31 @@ footer.footer {
 
 
 	.main-post {
+		.main-avatar:hover .hover-overlay {
+			opacity: 0.75;
+		}
+
+		.hover-overlay {
+			margin: 5px;
+			position: absolute;
+			bottom: 2px;
+			height: 45px;
+			padding-top: 2px;
+			width:120px;
+			background: #000;
+			opacity: 0;
+			transition: opacity 0.3s;
+		}
 		.profile-block {
 			//height: 100px;
 		}
 		.main-avatar {
+			color: white;
+			position: relative;
 			float: left;
 			margin-right: 15px;
-			margin-bottom: 5px;
-			padding-bottom: 3px;
+			margin-bottom: 0px;
+			padding-bottom: 0px;
 			text-align: center
 		}
 		.post-content {

public/templates/topic.tpl

@@ -15,10 +15,13 @@
 		<li class="row main-post" data-pid="{main_posts.pid}" data-deleted="{main_posts.deleted}">
 			<div class="span12">
 				<div class="post-block">
-					<a class="main-avatar img-polaroid" href="/users/{main_posts.username}">
+					<a class="main-avatar" href="/users/{main_posts.username}">
 						<img src="{main_posts.gravatar}?s=120" align="left" /><br />
-						<i class="icon-star"></i><span class="user_rep_{main_posts.uid}">{main_posts.user_rep}</span>
-						<i class="icon-pencil"></i><span class="user_posts_{main_posts.uid}">8</span>
+						<div class="hover-overlay">
+							{main_posts.username}<br />
+							<i class="icon-star"></i><span class="user_rep_{main_posts.uid}">{main_posts.user_rep}</span>
+							<i class="icon-pencil"></i><span class="user_posts_{main_posts.uid}">8</span>
+						</div>
 					</a>
 					<h3>{topic_name} 
 						<small>