li > img

examples/web_grid_animation/src/jsMain/kotlin/com/sample/Main.kt

@@ -60,6 +60,17 @@ object AppStyleSheet: StyleSheet() {
         "p" style {
             fontSize(2.em)
         }
+
+        "li > img" {
+            position(Position.Absolute)
+            left(50.percent)
+            property("transform", "translateX(-50%)")
+            width(62.percent)
+            property("bottom", "-10%")
+            property("filter", "drop-shadow(0 50px 20px rgba(0, 0, 0, 0.20))")
+            property("transition-property", "bottom, filter")
+            property("transition-duration", ".3s")
+        }
     }
 }
 

examples/web_grid_animation/src/jsMain/resources/app.css

@@ -27,16 +27,7 @@ li:before{
   background-repeat: no-repeat;
 }
 
-li > img{
+
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 62%;
-  bottom: -10%;
-  filter: drop-shadow(0 50px 20px rgba(0, 0, 0, 0.20));
-  transition-property: bottom, filter, -webkit-filter;
-  transition-duration: .3s;
-}
 
 li > img:hover{
   bottom: 0;