play overlay

app/static/css/partials/_film.scss

@@ -104,11 +104,26 @@ main > .film {
         text-decoration: none;
       }
       figure {
+        position: relative;
         img {
           max-width: 100%;
           max-height: 100%;
           object-fit: contain;
         }
+        .overlay {
+          position: absolute;
+          height: 100%;
+          width: 100%;
+          display: flex;
+          img {
+            width: 50%;
+            margin: auto;
+            padding-bottom: 64px;
+            &:hover {
+              filter: invert(1);
+            }
+          }
+        }
       }
     }
     @media screen and (max-width: 799px) {

app/static/svg/play.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
+    <polygon points="56,32 248,128 56,224" fill="#F0F0F080"/>
+</svg>
+

app/templates/film.html

@@ -79,6 +79,9 @@ body {
 			<div class="item">
 				<a href="play/{{  item.id }}">
 					<figure>
+						<div class="overlay">
+							<img src="{% static 'svg/play.svg' %}">
+						</div>
 						<img src="https://archive.njp.ma/{{ item.id }}/480p.jpg">
 						<figcaption>
 							{{ item.title | safe }}