CODEWITHSUNDEEP
css
Finlay Metcalfe
Finlay Metcalfe

Reputation: 13

webkit-filter grayscale doesnt work

The problem is that in notepad++ it does not come up as grey which made me think that it isn't a correct part of the code but I'm not sure because I am a newbie. The thing I want it to do is to display the image and make is greyscale when I hover over it.

div.img2 {
    position: absolute;
    top: 0%;
    left: 0%;
    transition: grayscale 2s ease;
    -webkit-transition: grayscale 2s ease;
}
div.img2:hover {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

Upvotes: 1

Views: 404

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42304

Your code above is perfectly sound, and does indeed make an image turn grey upon hover. Keep in mind that your selector div.img2:hover is applying the hover to a <div>, and that <div> needs to have a class of img2. The <div> would need to have a child <img> in order to showcase the hover.

It's possible that you were applying the class to the image instead (with <img class="img2">), and meant to write div .img2 (with a space). The space here indicates that the selector should target any elements with a class of .img2 that are a child of <div>.

Here you can see the CSS working as written in the original question:

div.img2 {
  background: position: absolute;
  top: 0%;
  left: 0%;
  transition: grayscale 2s ease;
  -webkit-transition: grayscale 2s ease;
}

div.img2:hover {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}
<div class="img2">
  <img src="https://www.w3schools.com/css/img_fjords.jpg">
</div>

Hope this helps! :)

Upvotes: 1

Related Questions