add image overlay in ML

templates/2k11/admin/media_items.tpl

@@ -41,7 +41,7 @@
                 {if $file.authorid != 0}<span class="author block_level">{$file.authorname}</span>{/if}
             </header>
 
-            <div class="clearfix equal_heights">
+            <div class="clearfix equal_heights serendipity_ImageWrapper"">
                 <div class="media_file_preview">
                     {if $file.is_image AND $file.full_thumb}
                         {if $file.url}
@@ -70,7 +70,7 @@
                     {/if}
                 </div>
 
-                <footer>
+                <footer class="serendipity_ImageCaption">
                     <ul class="media_file_meta plainList">
                 {if $file.hotlink}
                         <li>{$file.nice_hotlink}</li>

templates/2k11/admin/style.css

@@ -1406,6 +1406,7 @@ form > .button_link:first-of-type { margin-top: 0; }
 
 
 /* MEDIA DB
+ 
 
    (These might go into imgedit.css or be merged with it.)
    ----------------------------------------------------------------- */
@@ -1413,6 +1414,38 @@ form > .button_link:first-of-type { margin-top: 0; }
 
 .media_pane .pagination { margin: 0; }
 
+.serendipity_ImageWrapper:hover > .serendipity_ImageCaption {
+    display: block;
+    -webkit-animation: fade-in 0.4s 1;
+    -moz-animation: fade-in 0.4s 1;
+    animation: fade-in 0.4s 1;
+    opacity: 1;
+}
+
+.serendipity_ImageCaption {
+    display: none;
+    position: absolute;
+    color: white;
+    background-color: rgba(0, 0, 0, 0.6);
+    opacity: 0;
+    
+    
+}
+
+@-webkit-keyframes fade-in {
+    0% { opacity: 0;  }
+    100% { opacity: 1; }
+}
+@-moz-keyframes fade-in {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}
+
+@keyframes fade-in {
+    0% { opacity: 0;  }
+    100% { opacity: 1; }
+}
+
 
 /* SMALL SCREEN (e.g. smartphones)
    ----------------------------------------------------------------- */