yet improved display of different aspect ratios, prefer to cut away sides rather...

[serve0] / style.css

diff --git a/style.css b/style.css
index c757fdd4c5d21fc2ce983f100de9e517625f670a..930c987e68e9bb81f9568ceb9bdcf4dd93f84635 100644 (file)
--- a/style.css
+++ b/style.css
@@ -55,13 +55,45 @@ body {
   -padding: 0 .25em;
   margin: 0 .5%;
   margin-bottom: 1em;
+  overflow: hidden;
 }
 
 .itemlist .list img {
-  width: 100%; height: 11em;
+  -width: 1000%; height: 11em;
+  max-width: unset;
   background-color: #111;
-  object-fit: contain;
+  object-fit: cover;
+  transform: translate(-05%, 0);
+  margin-left: 50%;
+}
+.itemlist .list img:hover {
+  animation-name: thumbscroll;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+}
+@keyframes thumbscroll {
+   0%    { transform: translate(-05%, 0); }
+   9.99% { transform: translate(-05%, 0); }
+  10%    { transform: translate(-15%, 0); }
+  19.99% { transform: translate(-15%, 0); }
+  20%    { transform: translate(-25%, 0); }
+  29.99% { transform: translate(-25%, 0); }
+  30%    { transform: translate(-35%, 0); }
+  39.99% { transform: translate(-35%, 0); }
+  40%    { transform: translate(-45%, 0); }
+  49.99% { transform: translate(-45%, 0); }
+  50%    { transform: translate(-55%, 0); }
+  59.99% { transform: translate(-55%, 0); }
+  60%    { transform: translate(-65%, 0); }
+  69.99% { transform: translate(-65%, 0); }
+  70%    { transform: translate(-75%, 0); }
+  79.99% { transform: translate(-75%, 0); }
+  80%    { transform: translate(-85%, 0); }
+  89.99% { transform: translate(-85%, 0); }
+  90%    { transform: translate(-95%, 0); }
+ 100%    { transform: translate(-95%, 0); }
 }
+
 .itemlist .list label {
   display: block;
   font-weight: bolder;