icons + texts

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

@@ -12,22 +12,22 @@ fun Card(className: String, title: String, subTitle: String, imgUrl: String) {
             H2 { Text(title) }
             P { Text(subTitle) }
         }
-        Img(src = imgUrl)
+        Img(src = imgUrl, alt = "")
     }
 }
 
 
 fun main() {
     renderComposable(rootElementId = "root") {
-        Card("adidas", "I-5923 RUNNER PRIDE", "£99.95", "https://upload.wikimedia.org/wikipedia/commons/9/9c/IntelliJ_IDEA_Icon.svg")
-        Card("tiger", "TIGER ALLY", "£95.00", "/pycharm.png")
-        Card("adidas", "NMD_R1", "£109.95", "https://upload.wikimedia.org/wikipedia/commons/c/c9/PhpStorm_Icon.svg")
-        Card("tiger", "CALIFORNIA 78", "£75.00", "/webstorm.png")
-        Card("adidas", "TUBULAR DUSK PRIMEKNIT", ">£109.95", "https://upload.wikimedia.org/wikipedia/commons/9/95/RubyMine_Icon.svg")
-        Card("tiger", "GSM", "£80.00", "https://upload.wikimedia.org/wikipedia/commons/5/5f/AppCode_Icon.svg")
-        Card("adidas", "NMD_CS2 PRIMEKNIT", "£149.95", "/goland.png")
-        Card("tiger", "MEXICO 66", "£75.00", "/datagrip.png")
-        Card("adidas", "STAN SMITH", "£74.95", "/datalore.png")
-        Card("tiger", "ALVARADO", "£70.00", "/clion.png")
+        Card("adidas", "IDEA", "£99.95", "https://upload.wikimedia.org/wikipedia/commons/9/9c/IntelliJ_IDEA_Icon.svg")
+        Card("tiger", "PyCharm", "£95.00", "https://upload.wikimedia.org/wikipedia/commons/1/1d/PyCharm_Icon.svg")
+        Card("adidas", "PHPStorm", "£109.95", "https://upload.wikimedia.org/wikipedia/commons/c/c9/PhpStorm_Icon.svg")
+        Card("tiger", "WebStorm", "£75.00", "/webstorm.png")
+        Card("adidas", "RubyMine", ">£109.95", "https://upload.wikimedia.org/wikipedia/commons/9/95/RubyMine_Icon.svg")
+        Card("tiger", "AppCode", "£80.00", "https://upload.wikimedia.org/wikipedia/commons/5/5f/AppCode_Icon.svg")
+        Card("adidas", "GoLand", "£149.95", "/goland.png")
+        Card("tiger", "DataGrip", "£75.00", "/datagrip.png")
+        Card("adidas", "Datalore", "£74.95", "/datalore.png")
+        Card("tiger", "Clion", "£70.00", "/clion.png")
     }
 }

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

@@ -60,21 +60,19 @@ p{
   font-size: 2em;
 }
 
-img{
+li > img{
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   width: 62%;
   bottom: -10%;
-  -webkit-filter: drop-shadow(0 50px 20px  rgba(0, 0, 0, 0.20));
   filter: drop-shadow(0 50px 20px rgba(0, 0, 0, 0.20));
   transition-property: bottom, filter, -webkit-filter;
   transition-duration: .3s;
 }
 
-img:hover{
+li > img:hover{
   bottom: 0;
-  -webkit-filter: drop-shadow(0 80px 40px  rgba(0, 0, 0, 0.20));
   filter: drop-shadow(0 80px 30px rgba(0, 0, 0, 0.20));
  }