Show item tags and titles on hover

internal/handlers/home.go

@@ -73,12 +73,19 @@ func (h homeContent) Render(sw *ssr.Writer) error {
 				{{if .LinkURL}}<div class="link-url">{{.LinkURL}}</div>{{end}}
 			</div>
 			{{end}}
+		{{if or .Title .Tags}}
+		<div class="item-overlay">
+			{{if and .Title (ne .ItemType "link") (ne .ItemType "quote")}}
+			<div class="item-title">{{.Title}}</div>
+			{{end}}
 			{{if .Tags}}
 			<div class="item-tags">
 				{{range .Tags}}<span class="item-tag">{{.}}</span>{{end}}
 			</div>
 			{{end}}
-		</a>
+		</div>
+		{{end}}
+	</a>
 		{{end}}
 	</div>
 </div>

internal/static/css/app.css

@@ -254,14 +254,36 @@ button, input, textarea, select {
 	pointer-events: none;
 }
 
+/* Item Overlay */
+.item-overlay {
+	position: absolute;
+	inset: auto 0 0 0;
+	padding: 0.75rem;
+	background: rgba(255, 255, 255, 0.9);
+	border-top: 1px solid var(--gray-2);
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	opacity: 0;
+	transform: translateY(8px);
+	transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.grid-item:hover .item-overlay {
+	opacity: 1;
+	transform: translateY(0);
+}
+
+.item-title {
+	font-weight: 700;
+	font-size: 0.9rem;
+}
+
 /* Item Tags */
 .item-tags {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 0.25rem;
-	padding: 0.5rem;
-	background: var(--bg);
-	border-top: 1px solid var(--gray-2);
 }
 
 .item-tag {
@@ -398,6 +420,7 @@ button, input, textarea, select {
 	border: none;
 	padding: 0;
 	margin-bottom: 1rem;
+	gap: 0.5rem;
 }
 
 .item-meta .timestamp {