Apply lipstick to hidden image design

res/css/views/messages/_MImageBody.scss

@@ -19,21 +19,6 @@ limitations under the License.
     margin-right: 34px;
 }
 
-.mx_MImageBody_hidden {
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    text-align: center;
-    border: 1px dashed $input-border-color;
-
-    // To center the text in the middle of the frame
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
 .mx_MImageBody_thumbnail {
     position: absolute;
     width: 100%;
@@ -74,3 +59,36 @@ limitations under the License.
     color: $imagebody-giflabel-color;
     pointer-events: none;
 }
+
+.mx_HiddenImagePlaceholder {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+
+    // To center the text in the middle of the frame
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+
+    cursor: pointer;
+    background-color: $header-panel-bg-color;
+
+    .mx_HiddenImagePlaceholder_button {
+        color: $accent-color;
+
+        img {
+            margin-right: 8px;
+        }
+
+        span {
+            vertical-align: text-bottom;
+        }
+    }
+}
+
+.mx_EventTile:hover .mx_HiddenImagePlaceholder {
+    background-color: $primary-bg-color;
+}