Add button overlay

bookwyrm/static/css/bookwyrm.css

@@ -159,6 +159,33 @@ button::-moz-focus-inner {
     display: inline !important;
 }
 
+button .button-invisible-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 1rem;
+    box-sizing: border-box;
+
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+
+    background: rgba(0, 0, 0, 0.66);
+    color: white;
+
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+button:hover .button-invisible-overlay,
+button:active .button-invisible-overlay,
+button:focus .button-invisible-overlay {
+    opacity: 1;
+}
+
 /** File input styles
  ******************************************************************************/
 

bookwyrm/templates/book/book.html

@@ -85,8 +85,11 @@
             {% endif %}
 
             {% if book.cover %}
-                <button type="button" data-modal-open="cover_show_modal" class="cover-container is-h-m-mobile">
+                <button type="button" data-modal-open="cover_show_modal" class="cover-container is-h-m-mobile is-relative">
                 {% include 'snippets/book_cover.html' with size='xxlarge' size_mobile='medium' book=book cover_class='is-h-m-mobile' %}
+                    <span class="button-invisible-overlay">
+                        {% trans "Click to enlarge" %}
+                    </span>
                 </button>
                 {% include 'book/cover_show_modal.html' with book=book id="cover_show_modal" %}
             {% endif %}