Added various tag photos.

assets/components/tags/photos.vue

@@ -14,6 +14,11 @@
 				class="poster"
 				@load="$parent.$emit('load')"
 			>
+
+			<span
+				v-if="poster.comment"
+				class="photo-comment"
+			>{{ poster.comment }}</span>
 		</a>
 
 		<a
@@ -31,6 +36,11 @@
 				class="photo"
 				@load="$parent.$emit('load')"
 			>
+
+			<span
+				v-if="photo.comment"
+				class="photo-comment"
+			>{{ photo.comment }}</span>
 		</a>
 	</div>
 </template>
@@ -98,8 +108,18 @@ export default {
 	}
 }
 
-.photo-link:not(:last-child) {
-	margin: 0 .5rem 0 0;
+.photo-link {
+	display: inline-block;
+	position: relative;
+	overflow: hidden;
+
+	&:not(:last-child) {
+		margin: 0 .5rem 0 0;
+	}
+
+	&:hover .photo-comment {
+		transform: translateY(0);
+	}
 }
 
 .poster,
@@ -108,4 +128,21 @@ export default {
 	max-width: 100%;
 	box-shadow: 0 0 3px var(--shadow-weak);
 }
+
+.photo-comment {
+	width: 100%;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	box-sizing: border-box;
+	padding: .5rem;
+	color: var(--text-light);
+	background: var(--shadow);
+	font-size: .9rem;
+	text-shadow: 0 0 3px var(--shadow);
+	white-space: normal;
+	line-height: 1.25;
+	transform: translateY(100%);
+	transition: transform .25s ease;
+}
 </style>