Move message atrributes to image overlay

src/styles/_page.project.feed.scss

@@ -106,18 +106,25 @@
 				}
 			}
 
+			.comment {
+				position: absolute;
+				left: 0;
+				bottom: 0;
+				width: 100%;
+				margin: 0;
+				padding: var.$elem-spacing;
+				line-height: normal;
+				box-sizing: border-box;
+				border-radius: 0 0 var.$block-radius var.$block-radius;
+				transition: opacity 0.3s;
+				cursor: auto;
+				font-size: 0.9em;
+			}
+
 			&.message {
 				background: color.$message-bg;
 				color: color.$message;
 
-				p {
-					font-size: 0.9em;
-					height: 1em;
-					margin: 0 0 var.$elem-spacing 0;
-					display: inline-block;
-					width: 100%;
-				}
-
 				a {
 					color: color.$message;
 					&:hover {
@@ -125,8 +132,7 @@
 					}
 				}
 
-				a.drill {
-					line-height: 0;
+				.drill {
 
 					.drill-icon {
 
@@ -143,6 +149,24 @@
 						.drill-hover-icon {
 							color: color.$message-flashy;
 						}
+						.comment {
+							opacity: 0.3;
+						}
+					}
+
+					.comment {
+						background: color.$message-bg-light;
+
+						&:hover {
+							opacity: 1;
+						}
+						p {
+							margin: 0;
+						}
+
+						p + p {
+							margin-top: var.$elem-spacing;
+						}
 					}
 				}
 
@@ -256,21 +280,6 @@
 							outline: none;
 							border-radius: var.$block-radius;
 						}
-
-						.comment {
-							position: absolute;
-							left: 0;
-							bottom: 0;
-							width: 100%;
-							line-height: normal;
-							box-sizing: border-box;
-							margin: 0;
-							padding: 0.5em;
-							text-align: justify;
-							border-radius: 0 0 var.$block-radius var.$block-radius;
-							transition: opacity 0.3s;
-							opacity: 1;
-						}
 					}
 				}
 			}