diff --git a/app/soapbox/components/still_image.js b/app/soapbox/components/still_image.js
new file mode 100644
index 0000000000..45ce770c70
Binary files /dev/null and b/app/soapbox/components/still_image.js differ
diff --git a/app/styles/application.scss b/app/styles/application.scss
index 331e38f922..62682fc9cd 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -58,6 +58,7 @@
 @import 'components/navigation-bar';
 @import 'components/promo-panel';
 @import 'components/drawer';
+@import 'components/still-image';
 @import 'components/timeline-queue-header';
 @import 'components/badge';
 @import 'components/trends';
diff --git a/app/styles/components/still-image.scss b/app/styles/components/still-image.scss
new file mode 100644
index 0000000000..0b86d6adae
--- /dev/null
+++ b/app/styles/components/still-image.scss
@@ -0,0 +1,28 @@
+.still-image {
+  position: relative;
+  overflow: hidden;
+
+  img,
+  canvas {
+    width: 100%;
+    height: 100%;
+    display: block;
+    object-fit: cover;
+    font-family: inherit;
+  }
+
+  &--play-on-hover {
+    img {
+      position: absolute;
+      visibility: hidden;
+    }
+
+    &:hover img {
+      visibility: visible;
+    }
+
+    &:hover canvas {
+      visibility: hidden;
+    }
+  }
+}