script/play-resources: postercaption

content/static/script/play-resources.js

@@ -1,5 +1,5 @@
 function addButton(container, res) {
-    var button = $('<a class="play" title="Abspielen"></a>');
+    var button = $('<a class="play" title="Abspielen"><span class="postercaption">▶ Play</span></a>');
     if (res.poster) {
 	var img = $('<img class="poster"/>');
 	img.attr('src', res.poster);

content/static/style/default.css

@@ -616,6 +616,33 @@ li audio, li video, li .poster {
   color: #333;
   background-color: white;
 }
+.play {
+  display: inline-block !important;
+  position: relative !important;
+}
+.play .postercaption {
+  position: absolute;
+  z-index: 10;
+  text-align: center;
+  right: 0;
+  left: 0;
+  top: 45%;
+  bottom: 45%;
+  font-size: 300%;
+  color: white;
+  text-shadow: #666 1px 1px 0;
+  font-weight: bold;
+}
+.play:hover .postercaption {
+  color: #ffff7f;
+  text-shadow: black 1px 1px 8.5px;
+  opacity: 0;
+  -webkit-transition: opacity 3s ease-in;
+  -moz-transition: opacity 3s ease-in;
+  -o-transition: opacity 3s ease-in;
+  -ms-transition: opacity 3s ease-in;	
+  transition: opacity 3s ease-in;
+}
 
 .play {
     cursor: pointer;