I'm currently attempting to create an effect where my picture gradually fades to gray when I hover over it using the grayfade CSS function. However, for some unknown reason, this is not working despite spending hours trying to figure it out on my own. Any assistance would be greatly appreciated!
Below is all of my code, with a focus on the img and img:hover sections in the style tag:
<!doctype html>
<html>
<head>
<title>Basketball Uniforms 1/24/14</title>
<style>
* {
margin: 0;
font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
}
// Rest of the CSS styles remain the same
img {
width: 26em;
height: 20em;
border-radius: 1em;
-webkit-transition: -webkit-filter 0.5s ease;
-moz-transition: -moz-filter 0.5s ease;
-ms-transition: -ms-filter 0.5s ease;
-o-transition: -o-filter 0.5s ease;
transition: filter 0.5s ease;
}
img:hover {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
// Additional filters can be added here if needed
}
</style>
</head>
<body>
// Remaining HTML code stays unchanged
Your expertise and guidance in resolving my transition-grayfade issue are much appreciated!