How can I create a grayscale image that recolors on mouse-over using CSS?

Image Greyscale with CSS & Amp; Re-color on Mouse-over

In this post, we'll explore how to achieve this effect and provide cross-browser compatibility.

Pure CSS (Using only one colored image)

For the first method, we use pure CSS and only one image:

<code class="css">img.grayscale {
  filter: url("data:image/svg+xml;utf8,..."); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

img.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}</code>

Using SVG

This method uses inline SVG to create the grayscale effect and a separate image for the color version:

<code class="css">img.grayscale {
  -webkit-filter: grayscale(100%);
}</code>

<code class="html"><svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
  ...
  <image filter="url(&quot;#filtersPicture&quot;)" ... />
   </svg></code>

JavaScript

Finally, we can use JavaScript to change the image source on hover:

<code class="css">img.grayscale {
  filter: grayscale(100%);
}</code>

<code class="js">const grayscaleImages = document.querySelectorAll('.grayscale');

grayscaleImages.forEach(image => {
  image.addEventListener('mouseover', () => {
    image.src = 'path/to/color_image.jpg';
  });

  image.addEventListener('mouseout', () => {
    image.src = 'path/to/grayscale_image.jpg';
  });
});</code>

These methods provide cross-browser compatibility and allow you to easily add grayscale and hover effects to your images.

The above is the detailed content of How can I create a grayscale image that recolors on mouse-over using CSS?. For more information, please follow other related articles on the PHP Chinese website!