Hover Grayscale Effect - CSS (#79)

* Hover Grayscale Effect - CSS * Hover Grayscale Effect - CSS
technoph1le · Jan 1, 2025 · 633595e · 633595e
1 parent 21c1695
commit 633595e
Showing 1 changed file with 29 additions and 0 deletions.
diff --git a/public/data/css.json b/public/data/css.json
@@ -243,6 +243,35 @@
         ],
         "tags": ["css", "hover", "glow", "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"
       }
     ]
   }