Merge branch 'main' of https://github.com/Haider-Mukhtar/quicksnip

Author: Haider-Mukhtar

public/consolidated/all_snippets.json

@@ -465,6 +465,40 @@
           "effects"
         ],
         "author": "dostonnabotov"
+      },
+      {
+        "title": "Hover to Reveal Color",
+        "description": "A card with an image that transitions from grayscale to full color on hover.",
+        "code": [
+          ".card {",
+          "  height: 300px;",
+          "  width: 200px;",
+          "  border-radius: 5px;",
+          "  overflow: hidden;",
+          "}",
+          "",
+          ".card img{",
+          "  height: 100%;",
+          "  width: 100%;",
+          "  object-fit: cover;",
+          "  filter: grayscale(100%);",
+          "  transition: all 0.3s;",
+          "  transition-duration: 200ms;",
+          "  cursor: pointer;",
+          "}",
+          "",
+          ".card:hover img {",
+          "  filter: grayscale(0%);",
+          "  scale: 1.05;",
+          "} "
+        ],
+        "tags": [
+          "css",
+          "hover",
+          "image",
+          "effects"
+        ],
+        "author": "Haider-Mukhtar"
       }
     ]
   },