Introduction of image labels

* Shows the filename as the image title when rolling over the image
* Title expands if longer, when rolling over the title itself
First implementation of #106

1 files changed, 34 insertions, 3 deletions

diff --git a/css/styles.css b/css/styles.css
index 09ab43ea..d7d85277 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -66,15 +66,14 @@ button.share {
 	margin: 2px;
 }
 
-#gallery a.album .album-label,
-#gallery a.image .album-label {
+#gallery a.album .album-label {
 	color: #fff;
 	text-shadow: none;
 	position: absolute;
 	left: 0;
 	bottom: 0;
 	width: 100%;
-	background-color: rgba(0, 0, 0, .25);
+	background-color: rgba(0, 0, 0, .5);
 	text-align: center;
 	font-size: 18px;
 	line-height: normal;
@@ -85,6 +84,38 @@ button.share {
 	z-index: 11;
 }
 
+#gallery a.image .image-label {
+	display: none;
+	position: absolute;
+	left: 0;
+	bottom: 0;
+	width: 100%;
+	background-color: rgba(0, 0, 0, .8);
+	box-sizing: border-box;
+	padding: 5px;
+	overflow-x: hidden;
+	z-index: 11;
+	word-break: break-all;
+}
+
+#gallery a.image .image-label .title {
+	display: inline-block;
+	color: #fff;
+	text-shadow: none;
+	text-align: left;
+	font-size: 13px;
+	font-weight: bold;
+	line-height: normal;
+	overflow-x: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+#gallery a.image .image-label .title:hover {
+	overflow: visible;
+	white-space: normal;
+}
+
 #gallery a.album > img {
 	max-width: 200px;
 	max-height: 200px;