Hover effect black and white to colour

nilajcoder · nilajcoder · commit 801da5b65faf · 2024-08-11T18:02:59.000+05:30
diff --git a/Html/Hover/index.html b/Html/Hover/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My First Webpage</title>
+    <link rel="stylesheet" href="style.css"/>
+</head>
+<body>
+    
+     <!-- Image box inside the body -->
+     <div class="image-box"></div>
+</body>
+</html>
diff --git a/Html/Hover/leaf.jpg b/Html/Hover/leaf.jpg
diff --git a/Html/Hover/style.css b/Html/Hover/style.css
@@ -0,0 +1,16 @@
+/* Styling the box */
+.image-box {
+    width: 300px; /* Set the width of the box */
+    height: 300px; /* Set the height of the box */
+    background-image: url("leaf.jpg"); /* Set the image for the box */
+    background-size: cover; /* Ensure the image covers the box */
+    background-position: center; /* Center the image in the box */
+    border: 2px solid #000; /* Optional: add a border around the box */
+    margin: 20px auto; /* Center the box horizontally */
+    filter: grayscale(100%); /* Convert the image to black and white */
+    transition: filter 0.3s ease; /* Smooth transition for filter changes */
+}
+/* Hover effect: make the image colorful */
+.image-box:hover {
+    filter: grayscale(0%); /* Remove the grayscale filter to show the image in color */
+}
